AJAX is a technique for creating fast and dynamic web pages.
AJAX enables web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a page can be updated without reloading the entire page.
API
open(method , url , async);
send(string); (get is generally empty, post is generally a parameter)
The difference between the two: post is used for cache files that cannot be used,
a large amount of data
security
post use setRequestHeader("Content- type","application/x-www-form-urlencoded")(add request header)
send("property");
ajax is asynchronous and
does not need server to return the result.
Execute the following script directly.
readyStatue
0 object initialization not completed
1 request not sent completed
2 request sent completed
3 response not completed
4 response completed
status
200 normal
400 resource cannot be found
403 no access rights
404 the accessed resource does not exist
500 Server Internal Error
js whole process
1. Create XMLHttpRequest object
//The first step: create XMLHttpRuquest object
//var xmlHttpRequest;
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {//IE browser
xmlHttpRequest = new ActiveXObject("MSXML2.XMLHTTP");
}
if (xmlHttpRequest == undefined || xmlHttpRequest == null) {
alert("XMLHttpRequest object creation failed!!");
return;
}
//Step 2: Register callback Method
xmlHttpRequest.onreadystatechange = callback;
2. Request
//The third step: set the parameters for interacting with the server, the third parameter indicates whether it is asynchronous
var url = "login_data.json";
//var url = "LoginAjaxAction?userCode=" +document.getElementById("userCode").value ;
xmlHttpRequest.open("get",url,false) ;
//Step 4: Set the data sent to the server, start the interaction with the server
xmlHttpRequest.send(null);
3. Response
function callback() {
if (xmlHttpRequest.readyState == 4) {
//Indicates the corresponding response of the server The code is 200; the data is returned correctly
if (xmlHttpRequest.status == 200) {
//Acceptance method of plain text data var response = xmlHttpRequest.response; var jsonResponse = eval('(' + response + ')'); if (jsonResponse.code == 1){ alert("success") ; }else{ alert("failure:" + jsonResponse.message) } //alert(message); } } } jquery usage: this part is not particularly detailed , there are many values at the bottom, which means you can look for it, it's easy to find the function validateCodeUser(){ $.ajax(){ type:"get/post"; url:"url"; /* data:{
"userCode":document.getElementById("userCode").value;
,"password":
},
*/
success:function(data){
if(data.code == 0){
xxxx
}else{
xxx
}
}
}
}