Shulou(Shulou.com)06/01 Report--

本篇内容主要讲解"原生Ajax与JQuery Ajax实例分析"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"原生Ajax与JQuery Ajax实例分析"吧!

一、Ajax简介。

1、AJAX全称：异步的JavaScript和XML

2、AJAX不是编程语言，是一种无需重新载入整个页面，能够更新部分网页的技术。

3、要想更新内容或者提交一个表单，就要重新载入整个页面;使用AJAX技术的页面，通过与后台服务器进行少量的数据交换，就可以实现异步局部更新。

4、同步和异步：

同步：需要更新内容或者提交表单时，需要对整个页面向服务器请求->服务器处理、响应->页面载入

如果错误，再次请求，等待，响应;需要对整个页面解析重新载入，很多时候等待的时间很长，让人很抓狂。

异步：针对页面部分内容进行请求，服务器处理响应，页面刷新载入这一部分;这中间不会影响页面其他交互，无需进行等待，提升了用户体验。

二、Ajax概念1、XMLHttpRequest对象

IE5、IE6支持Active X对象。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

在新浏览器上，创建对象很简单，使用构造函数：var xhr=new XMLHttpRequest();老浏览器可能不常用，但我们要考虑在里边，兼容老浏览器：

function createXHR(){ if(typeof XMLHttpRequest !="undefined"){//如果浏览器不支持XMLHttpRequest对象，就使用IE5、IE6对象ActiveXObject return new XMLHttpRequest(); }else if(typeof ActiveXobject !="undefined"){ if(typeof arguments.callee.activeXString !="string"){ var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i,len; for(i=0,len=versions.length;i建立TCP连接

2>Web浏览器向Web服务器发送请求命令

3>Web浏览器发送请求头信息

4>Web服务器应答

5>Web服务器发送应答头信息

6>Web服务器向浏览器发送数据

7>Web服务器关闭TCP连接

HTTP状态码：

1XX：信息类，表示收到Web浏览器请求，正在进一步处理中

2XX:成功，表示用户请求被正确接收，如200

3XX:重定向，表示请求没有成功，客户必须采取进一步动作

4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在

5XX:服务器错误，表示服务器不能完成对请求的处理，如：500

3、XHR用法

向服务器发送请求，需要使用XMLHttpRequest对象的open()和send()方法。

方法描述open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型;GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）send(string)将请求发送到服务器。string：仅用于 POST 请求

发送请求：

xhr.open("get","example","false")//同步xhr.send(null);同步：JavaScript 会等到服务器响应就绪才继续执行。

异步：在等待服务器响应时执行其他脚本;

当响应就绪后对响应进行处理。

① 当服务器响应后会填充XHR对象属性

->responseText 获得字符串形式的响应数据。

->responseXML 获得 XML 形式的响应数据。

->status 响应的HTTP状态码

->statusText HTTP状态码说明

② 异步下检测XHR对象的readyState属性，请求过程中的活动阶段：

->0:未初始化，尚未调用open()方法

->1:启动，已经调用open()方法，但未调用send()方法

->2:发送，已经调用send()方法，尚未接到响应

->3:接收，已接收部分数据

->4:完成，已经接收全部响应数据。

readyState改变就会触发一次readyStatechange事件，可以利用这个事件来检测readyState变化的值。必须在open()之前指定onreadyStatechange事件处理程序。

var xhr=createXHR();xhr.onreadyStatechange=function(){ if(xhr.readyState==4){ if(xhr.status >=200 && xhr.status无法使用缓存文件（更新服务器上的文件或数据库）

->向服务器发送大量数据（POST 没有数据量限制）

->发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

如果需要像 HTML 表单那样 POST 数据;首先使用 setRequestHeader() 来设置 HTTP 头"Content-type"为"application/x-www-form-urlencoded"，其次以适当格式创建字符串。

var xhr=createXHR();//省略xhr.open("POST","ajax_test.asp",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");var form=document.getElementById("user-info");xhr.send(serialize(form));三、jQuery - AJAX

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

jQuery $.get() 方法

语法：$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

例子：

$("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); });});```+ jQuery $.post() 方法语法：$.post(*URL*,*data*,*callback*);必需的 *URL* 参数规定您希望请求的 URL。可选的 *data* 参数规定连同请求发送的数据。可选的 *callback* 参数是请求成功后所执行的函数名。例子：$("button").click(function(){$.post("demo_test_post.asp",{name:"Donald Duck",city:"Duckburg"},function(data,status){alert("Data: " + data + "\nStatus: " + status);});});

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求（name 和 city）一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

到此，相信大家对"原生Ajax与JQuery Ajax实例分析"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.