ajax代码及简单封装.txt

### AJAX技术概述与基本应用####一、引言AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的部分内容进行更新。 ####二、AJAX的基本原理AJAX的核心是`XMLHttpRequest`对象，这个对象在浏览器与Web服务器之间传输数据。当用户操作页面时，JavaScript向服务器发送请求，并处理响应；服务器响应后，页面会根据返回的数据进行局部更新。 ####三、创建`XMLHttpRequest`对象在不同浏览器中创建`XMLHttpRequest`对象的方式略有不同： ```javascript var xmlhttp; if (window.XMLHttpRequest) { //对于现代浏览器（Firefox、Chrome、Safari和Opera） xmlhttp = new XMLHttpRequest(); } else { //对于旧版本的IE浏览器（IE5, IE6, IE7等） xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } ``` ####四、初始化请求在创建了`XMLHttpRequest`对象之后，需要使用`open`方法来初始化一个请求： ```javascript xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); ``` - `"POST"`表示请求方式为POST。 - `"AJAXTest.ashx?" + "i=5&j=10"`为请求URL，其中`"i=5&j=10"`为POST请求的参数。 - `true`表示该请求是非同步的，即不会阻塞浏览器执行其他任务。 ####五、监听响应状态变化使用`onreadystatechange`事件来监听服务器响应的状态： ```javascript xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { alert(xmlhttp.responseText); } else { alert("AJAX请求失败"); } } }; ``` - `readyState == 4`：表示请求已完成且响应已就绪。 - `status == 200`：表示请求成功。 ####六、发送请求初始化好请求后，使用`send`方法发送请求： ```javascript xmlhttp.send(); ``` ####七、封装AJAX函数为了简化AJAX的使用，可以将以上步骤封装成一个函数： ```javascript function ajax(url, onsuccess, onfail) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { onsuccess(xmlhttp.responseText); } else { onfail(xmlhttp.status); } } }; xmlhttp.send(); } ``` - `url`：请求的URL。 - `onsuccess`：请求成功后的回调函数，参数为服务器返回的数据。 - `onfail`：请求失败后的回调函数，参数为服务器返回的状态码。 ####八、总结通过上述代码示例可以看出，AJAX的核心在于使用`XMLHttpRequest`对象实现客户端与服务器之间的异步通信。通过对请求的初始化、发送以及响应状态的监听，可以实现网页局部刷新的功能，从而提高用户体验。同时，通过简单的函数封装，可以进一步简化AJAX的使用，使其更加方便快捷。