javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 原生Ajax与JQuery Ajax

简单聊一聊原生Ajax与JQuery Ajax

作者：张延伟

AJAX 是一种用于创建快速动态网页的技术,下面这篇文章主要给大家介绍了关于原生Ajax与JQuery Ajax的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

没有学Ajax之前，就在想这到底是一门什么技术，问自己

什么是Ajax？

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<len;i++){
                    try{
                        new new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }catch(ex){
                        //
                    }
                }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("No XHR object available");
    }
}

这个函数首先检测原生XHR对象是否存在，如果存在，就返回它的实例。XHR不存在，检测ActiveX对象；否则，抛出错误。
创建兼容的XHR对象就可以使用：var xhr=createXHR();

2、HTTP请求

在运用Ajax之前，我认为先了解HTTP更有助于理解Ajax方法。

HTTP是一种应用进程与服务器之间连接的协议，无状态协议，也就是没有记忆，每一次请求都需要重新建立连接。

HTTP请求过程：

1>建立TCP连接

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

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

4>Web服务器应答

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

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

7>Web服务器关闭TCP连接

HTTP状态码：

3、XHR用法

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

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
 method：请求的类型；GET 或 POST
 url：文件在服务器上的位置
 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<300){
            alert(xhr.responseText);
      }else{
            alert("Request was unsuccessful:"+xhr.status);
      }
  }
}
xhr.open("get","example.txt",true);
xhr.send(null);

默认情况下，在发送XHR请求的同时，还会发送一些默认的头部信息。

使用 setRequestHeader() 可以设置自定义的请求头部信息：这个方法接收2个参数，头部字段的名称和头部字段的值。

setRequestHeader() 方法必须在open()后，send()前调用

xhr.open("get","example.txt",true); xhr.setRequestHeader("myheader","myvalue"); xhr.send(null);调用XHR对象的getRequestHeader() 方法，并传入头部字段名称可以取得相应的响应头部信息。

③ get请求、post请求

function addURLParam(url,name,value){
    url +=(url.indexOf("?") == -1  ?  "?" : "&");//检测url后是否已有参数
    url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
//示例
var url="example.php";
//添加参数
url=addURLParam(url,"name","Nico");
//初始化请求
xhr.open("get",url,true);

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 请求从服务器请求数据。

$("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，学习了之后，我还是有疑惑，知识清楚了之后如何运用？用在哪里？
想着给自己出个demo运用刚学的知识，等待更新。。。

总结

到此这篇关于原生Ajax与JQuery Ajax的文章就介绍到这了,更多相关原生Ajax与JQuery Ajax内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文