Introduction to XMLHttpRequest and $. ajax

There are two common methods to use ajax in js: the original XMLHttpRequest method and the popular Jquery ajax method. I will introduce them here.

For Ajax, the core object is XMLHttpRequest. All Ajax operations cannot be separated from operations on this object.
Create an XMLHttpRequest object
For ie browsers:

The Code is as follows:	Copy code
XmlHttp = new ActiveXObject ('Microsoft. xmlhttp ');

For other browsers:

The Code is as follows:	Copy code
XmlHttp = new XMLHttpRequest ();

Different browsers have different support for XMLHttpRequest objects in javascript, so you need to make a judgment based on the situation.

XMLHttpRequest object related methods
 
Open request

XMLHttpRequest. open (transfer method, address, asynchronous request or not)

Ready for execution

XMLHttpRequest. onreadystatechange

Obtain execution results

XMLHttpRequest. responseText

A simple php + Ajax example:
The first is the test. js file:

The Code is as follows:

Copy code

Var xmlHttp; Function S_xmlhttprequest (){ If (window. ActiveXObject ){ XmlHttp = new ActiveXObject ('Microsoft. xmlhttp '); } Else if (window. XMLHttpRequest ){ XmlHttp = new XMLHttpRequest (); } } Function php100 (url ){ S_xmlhttprequest (); XmlHttp. open ("GET", "do. php? Id = "+ url, true ); XmlHttp. onreadystatechange = byphp; XmlHttp. send (null ); } Function byphp (){ Var byphp100 = xmlHttp. responseText; Document. getElementById ('php100'). innerHTML = byphp100; }

Then the file that executes the php operation, do. php

The Code is as follows:	Copy code
<? PHP $ Id = @ $ _ GET [id]; For ($ I = 1; $ I <10; $ I ++ ){ Echo $ id; }

The frontend display page, test.html

The Code is as follows:	Copy code
<Script src = "test. js" type = "text/javascript"> </script> <A href = "#" onClick = "php100 (1)"> 1 </a> | <A href = "#" onClick = "php100 (2)"> 2 </a> | <A href = "#" onClick = "php100 (3)"> 3 </a> <Div id = "php100"> </div>

Data in jQuery ajax is sent to the server in the form of Key-Value pairs (Key/Value). When Using ajax to submit form data, you can use jQuery ajax's serialize () method form serialization to key-value pairs (key1 = value1 & key2 = value2 ...) And then submit. The serialize () method uses standard URL-encoded encoding to represent text strings. The following is an example of serialize () serialization form:

JQuery ajax prototype:

The Code is as follows:	Copy code
$. Ajax ({ Type: "POST ", Url: ajaxCallUrl, Data: "Key = Value & Key2 = Value2 ", Success: function (msg) {alert (msg );} });

Ajax serialize ():

The Code is as follows:	Copy code
$. Ajax ({ Type: "POST ", Url: ajaxCallUrl, Data: $ ('# formID'). serialize (), // form to be submitted Success: function (msg) {alert (msg );} });

Serialize () serialized form instance:

 

The Code is as follows:

Copy code

<Script type = "text/javascript" src = "/demo/jquery/jquery-1.7.2.min.js" > </Script> <Script type = "text/javascript"> $ (Document). ready (function (){ $ ("# Button"). click (function (){ Alert ($ ("# myForm"). serialize ()); }); }); </Script> <Form id = "myForm"> Name <input value = "liming" Name = "name"/> <br/> Position <input value = "CEO" name = "position"/> <br/> <Input id = "button" value = "serialized form" type = "button"/> </Form> 14 </form>

Name
Position
 
Prompt

I personally recommend jquery ajax, Which is incompatible and supports various functions such as load, post, get, getjson, and getscript to quickly load ajax.