Ajax (Asynchronous JavaScript and the Xml ) (asynchronous js and xml )
Ajax What is essential is:
Interactive, rapid development of dynamic web technology
Nature and reception request is the transmission request
ajax provides asynchronous communication with the server can query or update the database upon request, to update the local content in the page request returns
Ajax standard format:
GET
= the XMLHttpRequest new new XMLHTTP ();
// asynchronous execution function
xmlhttp.onreadystatechange = function ()
{
IF (xmlHttp.readyState == == 200 is xmlhttp.status &&. 4)
{
. document.getElementById ( "myDiv") = the innerHTML XMLHTTP. the responseText;
}
}
xmlhttp.open ( "the GET", "target.php TID. 1 =?", to true);
xmlhttp.send ();
// Open function values are inside "by value", the "target page", "whether asynchronous", send in not write anything
Post
xmlhttp = new XMLHttpRequest();
//异步执行函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","target.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user_id="+getCookie("user_id")+"&"+"user_pwd="+getCookie("user_pwd"));
important point:
1.POST second line setting response to the first, fixed! ! ! ! ! !
2.POST data sent with & separated, do not wrong, although transmission is cookie value, but not directly cookie to write up ( cookie is separated by a semicolon)
3. In the server side of the php straightforward to use $ _POST [ "user_id"] to get the data (long time to come out of the pits)
4.xmlhttp.onreadystatechange () function is executed asynchronously, to wait until the server returns the data before the implementation, where it will do the writing, provided that the use of this function is " whether asynchronous " is true
5. If " whether asynchronous " is to false , it is necessary to xmlhttp.onreadystatechange () function written in xmlhttp.send () behind
1 , using ajax step of transmitting data
Step 1: Create an asynchronous objects
var xhr = new XMLHttpRequest();
Step Two: Set request line open ( request method, request URL):
// get the request parameter if it is necessary in the url stitching parameters behind,
// post if there are parameters in the body of the transfer request xhr.open ( "get", "validate.php ? Username =" + name)
xhr.open("post","validate.php");
Step 3: Set request ( the GET ignoring this step) header : the setRequestHeader ()
// 1.get not need to set
// 2.post need to set the request header: the Content-the Type: file application / X-WWW-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
The fourth step: setting request body send ()
// 1.get parameters in the url stitching, so no need to provide this function
// 2.post parameter settings in this function ( if any parameter )
xhr.send(null) xhr.send("username="+name);
Step 5: Ask asynchronous data objects in response to receiving server
// a successful response has two conditions: 1. The server responds successfully 2. The response status asynchronous object to 4 ( the data can use the analyzed )
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
Jquery using ajax
.ajax $ ({
type: "GET", // GET or POST
URL: "abc.php", // URL address requested
data: {}, // the request parameter
dataType: "json", // json write the jq will help us into an array or an object he has used JSON.parse somehow
timeout: 3000, // 3 seconds after an error
beforeSend: function {()
will enter this function before sending //
// return false this ajax will not be stopped if there is no hair will continue to return false
},
success: function (data) {// get the result in the successful result of this function is to get the data
},
error: function () {// failure function
},
Complete: function () {// regardless of success or failure will enter this function
}
})
// used
$ .ajax ({
of the type: "GET",
url: "",
the Data: {},
dataType: " JSON ",
Success: function (Data) {
}
})
Ajax format data returned by the background processing, the format generally interact json
If you need to encrypt the data can be rewritten in ajax jquery function, or add parameters to before encryption, decryption is performed background.