Easily deal with Ajax (share your own Ajax function encapsulation, in fact, Ajax is very simple to use, it is difficult to use the data after you get the data)

Hey, guys! Let's discuss Ajax today! This article is only applicable to comrades who have a certain degree of Ajax foundation, but are still in a vague state. Of course, experts can skip this article ~~~

I. Concepts

Ajax (ASynchronousJAvascript +XML(Asynchronous JavaScript and XML ))

 

Ii. Results

Implement a no-refreshing effect and asynchronously fetch data from the background (not only AJAX can achieve this effect. For example, the src attribute in the IMG and script labels can achieve the same effect, you can try it yourself)

 

Iii. Nature

We may find Ajax difficult during our learning process. I also came here. I think we put the Center of Gravity wrong.

Because Ajax is very convenient to use (just write the request address, request method, asynchronous or not), we find it difficult, A large part of the reason is that we do not know how Ajax works internally. We should focus on how to use the data after data extraction.

OK. What is the essence of Ajax ??

The purpose of AJAX is to retrieve data from the backend path and retrieve files, just like the img/srcipt tag.HTTP protocol!

Therefore, if you want to understand the working principle of Ajax, it is best to take a look at the HTTP protocol, because the parameters set in Ajax are written to follow the HTTP protocol.

I will not talk about it much. I will introduce a very reliable and sound video tutorial. You can download it and learn it (not advertising it ~~ Really good ~~ Hee hee http://pan.baidu.com/s/1vg4hi

 

Iv. Summary

Still, Ajax is not difficult to use. After understanding it, you just need to block an Ajax function to retrieve data directly. What is difficult is how you can use the data for further development after obtaining the data.

Examples of AJAX application: Message book, waterfall stream, etc. The data retrieval methods are the same, but data processing is the focus.

Ajax is like using a script tag to introduce JQ. This is very simple, but how to use it after it is introduced is the focus.

 

OK. Next, I will share my own ajajx function (with detailed comments ~~), Its usage is similar to that of JQ Ajax. Of course it is not as perfect as JQ, but it is basically enough.

 

1/* 2 * Author: Ivan 3 * Date: 2014.06.01 4 * parameter description: 5 * opts: {'optional parameters'} 6 ** method: Request Method: Get/post, default Value: 'get'; 7 ** URL: the address where the request is sent. Default Value: Current page address; 8 ** data: String, JSON; 9 ** async: asynchronous: true/false; default value: true; 10 ** cache: True/false; default value: true; 11 ** contenttype: HTTP header information; default value: 'application/X-WWW-form-urlencoded '; 12 ** success: callback function after successful request; 13 ** error: callback function after failed request; 14 */15 function Ajax (OPTs) {16 // 1. set the default parameter 17 var ults = {18 method: 'get', 19 URL: '', 20 Data:'', 21 async: True, 22 cache: True, 23 contenttype: 'application/X-WWW-form-urlencoded ', 24 success: function () {}, 25 error: function () {}26}; 27 28 // 2. USER parameter override default parameter 29 for (var key in opts) {30 defaults [Key] = opts [Key]; 31} 32 33 // 3. processing Data 34 if (typeof ults. data = 'object') {// process data35 var STR = ''; 36 for (var key in ults. data) {37 STR + = Key + '=' + Defaults. data [Key] + '&'; 38} 39 ults. data = Str. substring (0, str. length-1); 40} 41 42 ults. method = defaults. method. touppercase (); // process method43 44 ults. cache = defaults. cache? '': '&' + New date (). gettime (); // process cache45 46 If (ults. method = 'get' & (defaults. data | defaults. cache) defaults. URL + = '? '+ Defaults. Data + defaults. cache; // process URL 47 48 // 4. Write ajax49 // 1. Create an Ajax object 50 var oxhr = Window. XMLHttpRequest? New XMLHttpRequest (): New activexobject ('Microsoft. XMLHTTP '); 51 // 2. connect to the server and tell the server what file you want to fetch 52 oxhr. open (defaults. method, defaults. URL, defaults. async); 53 // 3. send request 54 if (defaults. method = 'get') 55 oxhr. send (null); 56 else {57 oxhr. setRequestHeader ("Content-Type", defaults. contenttype); 58 oxhr. send (defaults. data); 59} 60 // 4. wait for the server to respond to 61 oxhr. onreadystatechange = function () {62 if (oxhr. readystate = 4) {63 If (oxhr. status = 200) 64 ults. success. call (oxhr, oxhr. responsetext); 65 else {66 defaults. error (); 67} 68} 69}; 70}

 

Call method:

For example

1 Ajax ({2 3 URL: '1. PHP ', 4 5 data: {Name: 'iva', sex: 'male', age: '23'}, 6 7 success: function (data) {alert ('returned data is: '+ data);} 8 9}); 10 11 Ajax ({12 13 URL: '1. PHP ', 14 15 data: 'name = Ivan & sex = male & age = 23', 16 17 cache: false, 18 19 success: function (data) {alert ('returned data is: '+ Data) ;}20 21 });

 

If you have any bugs, please check them out. The level is limited. Please click here ~~