js原生ajax与jquery的ajax用法对比

 js原生ajax与jquery的ajax用法对比

 

一、Ajax概述

AJAX（AsynchronousJavascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

1，异步交互

2，局部刷新

二、js原生Ajax实现步骤

1，get请求

  

 Java Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

/***************************************一、创建XMLHttpRequest对象**********************************/ function createXMLHttpRequest() {     xmlHttp = new XMLHttpRequest();     return xmlHttp; } /***************************************二、调用open()方法打开与服务器的连接***********************/ //      open(method, url, async) //  （1）method：请求方式，通常为GET或POST； //  （2）url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数； //  （3）async：这个参数可以不给，默认值为true，表示异步请求 var xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET", "/ajaxdemo1/AServlet", true); /***************************************三、发送请求***********************************************/ //当使用open打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。 //send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。 //注意：若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！ xmlHttp.send(null); /***************************************四、接收服务器响应*****************************************/ //当请求发送出去后，服务器端Servlet就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。 //XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。 //下面介绍一下XMLHttpRequest对象的5种状态： //? 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法； //? 1：请求已开始，open()方法已调用，但还没调用send()方法； //? 2：请求发送完成状态，send()方法已调用； //? 3：开始读取服务器响应； //? 4：读取服务器响应结束。 //但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。 //我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。 xmlHttp.onreadystatechange = function() {     if(xmlHttp.readyState == 4 && xmlHttp.status == 200)     {         alert(xmlHttp.responseText);     } };

2，post请求

 

 Java Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/*********************post请求步骤同get，下面列出需要注意的地方***********************/ //1，在使用AJAX发送请求时，需要我们自己来设置请求头： xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //2,然后使用send()方法来设置请求体内容。 xmlHttp.send("b=B"); 这时，Servlet就可以获取到这个参数 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {     System.out.println(request.getParameter("b")); } /*************************************贴出参考代码*****************************************/ "text/javascript">                function createXMLHttpRequest() {     return new XMLHttpRequest(); } function send() {     var xmlHttp = createXMLHttpRequest();     xmlHttp.onreadystatechange = function()     {         if(xmlHttp.readyState == 4 && xmlHttp.status == 200)         {             var div = document.getElementById("div1");             div.innerHTML = xmlHttp.responseText;         }     };     xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//注意点1     xmlHttp.send("b=B");  //注意点2，设置请求体 } < / script >

三、jquery的Ajax

 

 Java Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

$.ajax( {     //url:发送请求的地址（默认为当前页面），要求是String类型的参数     url: '/comm/test1.php',     //type:请求方法(post或者get)，默认是get，要求是String类型的参数。其他的htpp请求如（put、delete）等也支持     type: 'POST',     // async:默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false     async: true,     /*data:发送到服务器的数据，要求是Object或string类型的参数。如果已经不是字符串，            将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式，            例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，            JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。*/     data: {         name: 'yang', age: 25     },     //timeout:设置请求超时时间（毫秒），要求是number类型的参数。此设置将覆盖$.ajaxSetup()方法的全局设置。     timeout: 5000,   //超时时间     /*dataType:预期服务器返回的数据类型，要求为String类型的参数。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：         xml：返回XML文档，可用JQuery处理。         html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。         script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。         json：返回JSON数据。         jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。         text：返回纯文本字符串。*/     dataType: 'json',     //beforeSend:发送请求前可以修改XMLHttpRequest对象的函数（也可以修改页面一下信息）     beforeSend: function(xhr)     {         console.log(xhr)         console.log('发送前')     },     /*success:请求成功后调用的回调函数,要求为Function类型的参数，有两个参数。              (1)由服务器返回，并根据dataType参数进行处理后的数据。              (2)描述状态的字符串。*/     success: function(data, textStatus, jqXHR)     {         console.log(data)         console.log(textStatus)         console.log(jqXHR)     },     //error:请求失败时被调用的函数。要求为Function类型的参数，该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)     error: function(xhr, textStatus)     {         console.log('错误')         console.log(xhr)         console.log(textStatus)     },     //complete:请求完成后调用的回调函数（请求成功或失败时均调用）。要求为Function类型的参数，     complete: function()     {         console.log('结束')     } })