Ajax technical summary

Ajax

There is the traditional site of the problem

• Suman case, the page loads for a long time, the user can only wait
• After the form is submitted, if an inappropriate content, need to fill in all of the contents of the form, the use of poor results.
• Jump page will reload the page, waste of resources, increase user latency.

Ajax Overview

Ajax (Asynchronous JavaScript and XML), literally translated as "asynchronous JavaScript and XML", is a web development technology to create interactive web applications used to create dynamic Web pages quickly by Jesse James Garrett proposed. Compared with traditional Web applications, Ajax small amount of data exchange via the browser and the server can implement asynchronous update page, without reloading the entire page, you can update web pages.

Ajax application scenarios

• Raja page to upload more data
• List data without refreshing the page
• Table authentication data item out of focus
• Search prompt text box drop-down list

The basic steps of using Ajax

1. Create Ajax object

var xhr = new XMLHttpRequest();

2. Tell Ajax request address and request method

xhr.open('get','http://www.example.com');

3. Send Request

xhr.send();

4. The fetch response data to the server and the client

//设置监听器，等到服务器发送响应之后便执行下面的函数
xhr.onload = function () {
	console.log(xhr.requestText);
}

Request parameter which

• GET request method

xhr.open('get','http://www.baidu.com?name=zhangsan&age=13')

• POST request method

//设置请求头Content-Type，告诉服务器当前请求参数的格式是字符串
xhr.setRequestHeader('content-Type',
	'application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20')

Format request parameter
1.application / x-www-form- urlencoded

name=zhangsan&age=13

2.application/json

{name:'zhangsan',age:'20',sex:'男'}

JSON objects generally based server to transfer data, the following are two important ways JSON object:

• parse () to convert the string to an object json
• stringify () to convert json json object into a string
  Note: get request could not be submitted json object data format, form the traditional site of json object data submitted does not support the format.

Fetch response server

Ajax status code
created ajax objects, objects ajax configuration, the transmission request, and receiving the server response data, the process of each step will correspond to a value, this is the status code ajax.
0: Request not initialized (Not call Open ())
. 1: Request has been established, but not yet transmitted (also not called Send ())
2: request has been sent
3: request is being processed, generally the response has been part of the data can use the
4: complete response, the server can obtain and use the response

xhr.readyState //获取Ajax状态码

var xhr = new XMLHttpRequest();
//0 已经创建了还没有初始化
console.log(xhr.readyState);
xhr.open('get','http://www.baidu.com');
//1 请求已经建立，但还没发送
console.log(xhr.readyState);
//当Ajax状态码改变后触发,必须要写在send之前
xhr.onreadyStateChange = function (){
	//2 请求已经发送
	//3：请求正在处理中，通常响应中已经有部分数据可以用了
	//4：响应已经完成，可以获取并使用服务器的响应了
	console.log(xhr.readyState);
}
xhr.send();

Summary: Two Ways response server
1. Using onload

xhr.send();
xhr.onload = function () {
	console.log(xhr.requestText);
}

2. readyState status code

xhr.onreadyStateChange = function (){
	if(xhr.readyState == 4) {
		console.log(xhr.responseText);
	}
}
xhr.send();

The difference between the two ways of getting the server side

Difference Description	onload event	onReadyStateChange event
IE version is compatible low	Not compatible	compatible
To determine whether the status code Ajax	Do not need	need
The number of calls	once	repeatedly

Ajax error handling

1. The network flow, the server can receive the request, the results returned from the server is not the expected results

• Based on the status code returned from the server, processed separately, http xhr.status obtain the status code
  2 network flow, the server does not receive the request 404 returns a status code
• An error check request address is
  3. The network flow, the server can receive the request and returns a status code 500
• Server error, looking for back-end programmers to communicate
  4. The network outage, the request can not be sent to the server
• onerror event fires xhr objects below, error processing in onerror event handler.

Caching Issues lower version of IE browser

Question: In the low version of the IE browser, Ajax request caching serious problem that in the case of a request address does not change, only the first request is actually sent to the server, subsequent requests from the browser will cache get the results, even if the data server-side updates, the client still get the old data cache.
Solution: Add Request parameter after the request address, to ensure that every different value of the request parameter.

xhr.open('get','http://www.baidu.com'+Math.random());