1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

ajax入门指南(一)

作者:用户 来源:互联网 时间:2016-07-24 10:12:49

服务器数据对象xmlhttprequestxmlhttpstateajax状态码Ajax发送请求state和status的区别Ajax请求发送发送http请求发送ajax请求

ajax入门指南(一) - 摘要: 本文讲的是ajax入门指南(一), ajax入门指南,对开始学习ajax的朋友应该有所帮助。 1.AJAX兼容IE和Firefox两大浏览器,出现了AJAX开发框架.      2.AJAX开

ajax入门指南,对开始学习ajax的朋友应该有所帮助。

1.AJAX兼容IE和Firefox两大浏览器,出现了AJAX开发框架.
     2.AJAX开发关键技术:XMLHttpRequest对象,JavaScript编程技术,DOM(文档对象模型),CSS(层叠样式表),和XSLT(可扩展样式表转换)
           XMLHttpRequest对象是实现Ajax应用的核心;
           JavaScript是Ajax应用在客户端使用的脚本语言;
           通过JavaScript和DOM的配合才能实现页面的动态更新;
           CSS主要用于控制页面元素的显示样式;
           XSLT可以将XML文档转换为任何形式的文档,在Ajax应用中使用XSLT可以实现数据和页面显示的完全分离;
     3.XMLHttpRequest对象:
   3.1 发送请求
                  使用XMLHttpRequest对象向服务器端发送请求的基本流程可以分为5步:
                  3.1.1   从Web表单中获取需要的数据;
                  3.1.2   建立要连接的URL;
                  3.1.3   打开到服务器的连接;
                  3.1.4   设置服务器在完成后要运行的函数;
                  3.1.5   发送请求;
                  function callServer(){
                        //表单中获取必要的数据
                        var city = document.getElementById("city").value;
                        var state = document.getElementById("state").value;
                        //只有在数据不为空时才发出请求
                        if((city == null) (city == "")) return;
                        if((state == null) (state == "")) return;
                        //请求的URL
                        var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
                        //联系服务器,打开连接
                        xmlHttp.open("GET",url,true);//"true"代表该请求是异步的
                        //设置请求完成时的响应函数,注意这里是请求完成时,并不是响应完成时
                        xmlHttp.onreadystatechange = updatePage;
                        //发送请求,因为已经在请求URL中添加了要发送给服务器的数据(city和state),所以请求中 无需再发送其他数据.
                        xmlHttp.send(null);
                    }

             3.2 .处理HTTP响应
                        200:一切正常  
                        401:未经授权
                        403:禁止
                        404:没找到
                        function updatePage(){
                            //readState == 4,表示请求成功完成
                            if(xmlHttp.readyState == 4){
                                if(xmlHttp.status == 200){
                                    var response = xmlHttp.responseText;//HTTP请求返回的文本内容
                                    document.getElementById("zipCode").value = response;
                                }else if(request.status == 404){
                                        //HTTP状态码为404,无法找到资源
                                        alert("404 Not Found");
                                }else if(request.status == 403){
                                        //HTTP状态码为403,资源不可用
                                        alert("403 Forbidden");
                                }else if(request.status == 401){
                                        //HTTP状态码为401,未经授权
                                        alert("401 Unauthorized");
                                }
                            }
                        }

              3.3.HTTP就绪状态
                       共有5种就绪状态:
                        0:请求未初始化(还没有调用XMLHttpRequest对象的open方法)

                        1:请求已经建立,但是还没有发送(还没有调用send方法)
                        2:请求已发送,正在处理中
                        3:请求在处理中。通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成
                        4:响应已完成,可以获取并且使用服务器的响应了 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索服务器 , 数据 , 对象 , xmlhttprequest , xmlhttp , state , ajax状态码 , Ajax发送请求 , state和status的区别 , Ajax请求发送 , 发送http请求 发送ajax请求 redis入门指南、webgl入门指南、微信小程序入门指南、cloudstack入门指南、hi fi音响入门指南,以便于您获取更多的相关知识。

ajax-关于Ajax 入门一直出错

问题描述 关于Ajax 入门一直出错 在客户端页面输入自己的名字,服务端返回‘你好+名字’执行会有错误提示AjaxGet()函数未定义我是在VS下开发的给你们贴出目录和源码HTMLPage.htm是客户端页面,源码...

jquery $.ajax入门应用一_jquery

前台  复制代码 代码如下: 无标题页 //这个方法把ajax方法封装一下,方便调用。 function myajax(){ $.ajax({ type:'get', url:'ajax.aspx', data:'', dataType:'html', success:callback }); } //回调函数 function callback(data){ $('#response').append(data); } //onload()...

PHP Ajax 入门HelloWorld

...的理解。   要看高大上的:掌握 Ajax,第 1 部分: Ajax 入门简介   实际操作   在wamp/www/中新建一个testAjax文件夹,里面两个文件:index.html 和 getZipcode.php   index.html ? 1 2 3 4 5 ...

20个有用的 PHP + jQuery 组件和教程

...,以便发现是容易的什么您寻找。 使用PHP和jQuery,在本指南,您将学会如何创造目录树。 Check out the Demo Here2. Create a Photo Admin Site Using PHP and jQuery 创造的一个照片站点一个sceencast讲解使用PHP、jQuery和AJAX。 您将学会如何从数据库...

AJAX开发应用入门

如今,随着Gmail、Google-maps的应用和各种浏览器的支持,AJAX正逐渐吸引全世界的眼球。 一、AJAX定义 AJAX(Asynchronous JavaScript and XML)其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中: 使用XHTML和C...

前三篇
后三篇