Ajax Full Contact

(1) XMLHttpRequest Object Creation (XHR)

1 var request; 2 if (window. XMLHttpRequest) {3     new XMLHttpRequest ();   Ie7+,ff,chrome,opera,safari. 4 }else{5     new ActiveXObject ("Microsoft.XMLHTTP");   IE5 66 }

(2) XHR Sending requests

Open (Method,url,async)

Method= "Get", "post", "get", "post", general capitalization

Url= absolute Address, relative address

Async=true, asynchronous

Set HTTP request header information

Send form Information
Request.setrequestheader ("Content-type", "application/x-www-form-urlencoded")

1<script>2document.getElementById ("Search"). onclick =function() { 3     varRequest =NewXMLHttpRequest ();4Request.open ("GET", "server.php?number=" + document.getElementById ("keyword"). value);5 request.send ();6Request.onreadystatechange =function() {7         if(request.readystate===4) {8             if(request.status===200) { 9document.getElementById ("SearchResult"). InnerHTML =Request.responsetext;Ten}Else { OneAlert ("Error occurred:" +request.status); A             } -         }  -     } the } -  -document.getElementById ("Save"). onclick =function() {  -     varRequest =NewXMLHttpRequest (); +Request.open ("POST", "server.php"); -     vardata = "Name=" + document.getElementById ("Staffname")). Value ++ "&number=" + document.getElementById ("Staffnumber"). Value A+ "&sex=" + document.getElementById ("Staffsex"). Value at+ "&job=" + document.getElementById ("Staffjob"). Value; -Request.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); - request.send (data); -Request.onreadystatechange =function() { -         if(request.readystate===4) { -             if(request.status===200) {  indocument.getElementById ("Createresult"). InnerHTML =Request.responsetext; -}Else { toAlert ("Error occurred:" +request.status); +             } -         }  the     } * } $</script>

View Code

(3) XHR Get a response

Listen through onreadystatechange.

ResponseText, text content

Responsexml,xml Content

Status StatusText:
Getallresponseheader ();
getResponseHeader ("xx");

ReadyState
0 No Open
1 Connection established
2 Receive Processing
3 processing
4 Complete

(4) JSON Basic concepts

1.JavaScript Object Notation (JavaScript object Notation)

2. Parsing JSON

Eval (' (' +jsonstring+ ') '), do not validate code JSON format, can execute JS method

Json.parse, verify JSON format, do not execute JS method

(5) Cross-domain

http://www. Abc.com:80/scripts/jquery.js

Protocol subdomain primary Domain name Port number Request resource address

The above protocol, subdomain, primary domain, port number, any one of the different, are counted differently domain

1. Agent

2.JSONP, resolving the cross-domain of GET requests

Front-end modification, JSONP: "Callback"

1 $.ajax ({2Type: "GET",     3URL: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $ ("#keyword"). Val (),4DataType: "Jsonp",5JSONP: "Callback",6Successfunction(data) {7         if(data.success) {8$ ("#searchResult"). HTML (data.msg);9}Else {Ten$ ("#searchResult"). HTML ("error occurred:" +data.msg); One         }   A     }, -Errorfunction(JQXHR) { -Alert ("Error occurred:" +jqxhr.status);  the     },      -});

Back-end modification

The value of the callback is spliced here ({"": "}")

3.HTML5 provided by XHR2 (IE10 above support)

You only need to make the following modifications on the server side

Header ("access-control-allow-origin:*")

*: All domain names

Header ("Access-control-allow-methods:post,get")

Can allow Post,get

Ajax Full Contact