table of Contents
Parameter setting request for the XMLHttpRequest object
What is AJAX?
- AJAX:”Asynchronous JavaScript and XML”
- Chinese meaning: Asynchronous JavaScript and XML .
- It refers to a create interactive web development technology web application.
- AJAX is not an acronym , but by Jesse James Gaiiett term creation.
- Simply understood as: JavaScript + the XMLHttpRequest + CSS + collection server
Why AJAX?
Because the traditional web pages after login, after the user enter the account password, click submit, and then sent to the server, the user can not operate during this period, after the completion of the implementation server to refresh the page, but with AJAX, users can during this period operation because the account or password when user input, it has been secretly sent a request to the server, but does not refresh the page.
AJAX advantage
- lAjax in essence is a browser technology
- The main object of the technique lAjax data exchange between the local client and the server
- l The most notable feature of the protagonist XMLHttpRequest technology is that it can not reload the entire layout to update the information, the so-called Refresh without Reload (light refresh)
- L communication between the server entirely through Javascript to implement
- l the amount of data transmitted XMLHttpRequest itself is very small, so the reaction will be faster, the program will make the network more like a desktop application
- lAJAX is to use Javascript to help you talk quietly in the background information to the server, and finally to help you present the results of Javascript or DOM, because all actions are made Javascript do it, so save the trouble of a page reload, users also feel can not wait for the pain
Create XMLHttpRequest object
The core Ajax applications is XMLHttpRequest, different methods to create the XMLHttpRequest object in IE browsers and non-IE browsers. In short: it can obtain txt or xml data asynchronously from the server
Using the XMLHttpRequest object
Of the following modes, synchronization can XMLHttpRequest objects:
1. Create an object; - new (assistant called up)
2. Create request; - open (to tell him to do something)
3. Send request; - send (Go)
Parameter setting request for the XMLHttpRequest object
1.GET way
1.1 Setting parameters
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET browser mode request may be provided no cache
xhr.setRequestHeader ( "If-Modified-Since ", "0");
1.3 Sent:
xhr.send (null); // GET way
2.POST method:
1.1 set the parameters:
xhr.open ( "the POST", "GetAreasByAjax.aspx", to true);
1.2 Add request header:
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3 Sent:
xhr.send("isAjax=1&na=123");//POST方式
After the request will be sent back in response, it has requested that I know how to return it?
Sets the callback function
Asynchronous XMLHttpRequest object
When using asynchronous XMLHttpRequest object, you must use: onreadystatechange event.
Usage patterns should be:
1. Create the object; -new
2. Set readystatechange event triggers a callback function ; -onreadystatechagne
3. Open Request; -open
4. The transmission request; -send
Note: The callback function checks readyState property to see if the data is ready (whether or equal to 4).
If not ready, check again from time to time. Because the data is not downloaded, we can not use its properties and methods.
If you're ready to continue down;
Detailed code:
<script type="text/javascript">
$(function () {
$("#btnGetDate").click(function () {
//开始通过AJAX向服务器发送请求.
var xhr;
if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器
xhr = new XMLHttpRequest();
} else {// 低IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);
xhr.send();//开始发送
//回调函数:当服务器将数据返回给浏览器后，自动调用该方法。
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。
if (xhr.status == 200) {//判断响应状态码是否为200.
alert(xhr.responseText);
}
}
}
});
});
</script>
