Ajax summary and ajax learning Summary

Ajax summary and ajax learning Summary

In normal development projects, it is inevitable that you have access to the front-end knowledge and need to write interfaces. Sometimes, ajax in js spans requests and summarizes the ajax writing method.

Before you start, you need to prepare two files: ajax. php ;ajax.html

 

1. Basic ajax steps (ajax. php)

// 1. create an object var ajax = new XMLHttpRequest (); // alert (typeof ajax); // 2. create a connection to ajax. open ('get', 'ajax. php? Id = 5', true); // 3. send request ajax. send (); // 4. prepare the event processing result ajax. onreadystatechange = function () {if (ajax. readyState = 4 & ajax. status = 200) {// request: request // response: response var res = ajax. responseText; // alert (res); document. write (res );}}

What is the difference between synchronous and asynchronous ajax? Asynchronous: Send the younger brother out, when to return, and when to process it. The main program continues to run and will not wait. Synchronization: (rarely used) it will wait for sending, and the main program will not continue to execute. Method: Request type; GET or POST.

 

2. ajax encapsulation as a function (ajax. php)

<Script> function get (url, func) {var ajax = new XMLHttpRequest (); ajax. open ('get', url, true); ajax. send (); ajax. onreadystatechange = function () {if (ajax. readyState = 4 & ajax. status = 200) {var res = ajax. responseText; func (res) ;}}// callback + anonymous get ('1. php ', function (res) {alert (res);}) get ('ajax. php ', function (res) {console. log (res);})/* get ('1. php ', chuli); function chuli (res) {alert (res);} get ('ajax. php', chuli2); function chuli2 (res) {console. log (res);} */</script>

This encapsulation makes it easy for us to use. tp framework, ecshop, and ecstore all have their own encapsulated ajax.

 

3. ajax request in jq (ajax. php)

$. Ajax ({url: 'ajax. php? Id = 5', dataType: 'json', // specify the type of the returned data: xml, html, script, json, text, _ default (do not lie to him) type: 'get', // set the request type: get (default) post // data: 'name = 123 & age = 18 ', // The transmitted data (in two formats) data: {age: 8}, // The transmitted data async: true, // synchronous asynchronous: true default asynchronous false synchronous success: function (res) {// alert (typeof res); // alert (res. id); alert (123) ;}, error: function (a) {alert ('error bird ~~~ ');}});

 

4. ajax cross-origin (ajax. php)

The Protocol, domain name, and port are different across domains. Ajax itself cannot cross-origin, and cross-origin is implemented by generating a script tag. Because the src attribute of the script tag has no cross-origin restrictions. In fact, after the ype: 'jsonp' is set, the $. ajax method has nothing to do with ajax XmlHttpRequest. Instead, the jsonp protocol is used. JSONP is an unofficial protocol that allows the server to integrate Script tags to return to the client and implement cross-origin access through javascript callback.

There are several methods to implement cross-origin requests of ajax. Here we write a method to implement cross-origin through 'jsonp '.

<Script type = "text/javascript"> var url = 'HTTP: // localhost/other. php? Act = get_article '; $. ajax ({type: "get", url: url, jsonp: "callbackparam", jsonpCallback: "jsonpCallback1", success: function (data) {var obj = eval (data ); // process received data}, // end error: function (e) {alert ("error") ;}}); </script>

Knowledge is updated quickly and learning is very important. When I look back and feel that these are very simple, it means that I am making progress and growing...