AjaxHelper's get and post request encapsulation class, ajaxhelperget

AjaxHelper's get and post request encapsulation class, ajaxhelperget

Recently, when I learned about ajax, I found that there are a lot of repeated code when calling get and post requests. Some companies will use their own encapsulated methods. This can directly call ajax methods, however, when using it, we should also learn how it is encapsulated and some principles. Ajax technology is used in the development of many websites. asynchronous refresh greatly improves the website performance. Ajax requests are classified into five categories. The following lists the ajax get and post request encapsulation classes I have summarized by searching materials.

Code:

1 var ajaxHelper = {2 // 1. get the asynchronous object 3 GetXhr: function () {4 var xhr; 5 if (window. XMLHttpRequest) {6 // compatible with new browsers 7 xhr = new XMLHttpRequest (); 8} else {// compatible with IE vintage browsers 9 xhr = new ActiveXObject ("Microsoft. XMLHTTP "); 10} 11 // return asynchronous object 12 return xhr; 13}, 14 // 2. define get request 15 ajaxGet: function (url, callback) {16 this. ajaxComm ("get", url, null, callback); 17}, 18 // 3. define post request 19 ajaxPost: function (url, params, callback) {20 this. ajaxComm ("post", url, params, callback); 21}, 22 // 4. public Request method 23 // method: get, post24 // url: request address to be sent 25 // parms: data sent to the server, which is only valid during post, get is null26 // callbakc: callback function 27 ajaxComm: function (method, url, params, callbakc) {28 // 1.0 create asynchronous object 29 var xhr = this. getXhr (); 30 // 2.0 sets the request parameter 31 xhr. open (method, url, params, callbakc); 32 // 3.0 prevents cache 33 if (method = "get") {34 xhr. setRequestHeader ("If-Modified-Since", "0"); 35} else {36 xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); 37} 38 // 4.0 set the callback function 39 xhr. onreadystatechange = function () {40 if (xhr. readyState = 4 & xhr. status = 200) {41 var objdata = xhr. responseText; 42 var data = JSON. parse (objdata); 43 // execute the business logic 44 callbakc (data); 45} 46} 47 // 5.0 send the request 48 xhr. send (params); 49 50} 51}

 

The difference between GET and POST in AJAX and GET and POST in HTTP

First, let's take a look at the difference between get and post.
1. get adds the parameter data queue to the URL referred to by the ACTION attribute of the submission form. The values correspond to each field in the form one by one and can be seen in the URL. Post uses the HTTP post mechanism to place fields in the form and their content in the html header and send them to the URL address referred to by the ACTION attribute. You cannot see this process.

2. For the get method, the server uses Request. QueryString to obtain the value of the variable. For the post method, the server uses Request. Form to obtain the submitted data. You can use Request to obtain parameters in either of the two methods.

3. The data volume transmitted by get is small and cannot exceed 2 kb. The amount of data transmitted by post is large, which is generally not restricted by default. However, in theory, it varies with the server.

4. Low get security and high post security.

5. <form method = "get" action = "a. asp? B = B "> with <form method =" get "action =". asp "> is the same. That is to say, the parameter list behind the action page is ignored, while <form method =" post "action =". asp? B = B "> unlike <form method =" post "action =" a. asp ">.

In addition
A Get request has the following features: it adds data to a URL and passes the data to the server in this way. Generally, a question mark is used? It indicates the end of the URL address and the beginning of the Data parameter. Each Data parameter in the following parameter appears in the form of "name = value". A connector & is used to distinguish between the parameter and the parameter.
Post requests have the following features: data is stored in the HTTP body. They are organized in different ways, including connection and delimiter, which can hide parameters and transmit a large amount of data, convenient.

All in all: when submitting a form, we usually use the post method. When we want to transmit a large data file, we need to use post. When the passed value only needs to be in the parameter mode (this value is not greater than 2 kb), use the get method.

Therefore, the use of ajax to submit both is naturally clear.

What is the difference between post submission and get in Ajax?

In simple terms, get is similar to transferring the value xxx. asp? Xxx = xxx & xxx = aazpost is the difference between passing values in a form. For details, see the following.

Get method:
The get method can be used to transmit simple data, but the size is generally limited to 1 kb, and the data is appended to the url for sending (http header transfer), that is, the browser attaches the form field elements and their data to the resource path in the request line according to the URL parameter format. The most important thing is that it will be cached by the client's browser, so that others can read the customer's data from the browser's historical records, for example, account and password. Therefore, in some cases, the get method may cause serious security problems. Post method:
When the POST method is used, the browser sends the form field elements and their data to the Web server as the entity content of the HTTP message, rather than as the URL address parameter, the amount of data transmitted in POST mode is much larger than that transmitted in GET mode. In short, the GET method delivers a small amount of data, high processing efficiency, low security, and will be cached, whereas the POST method does not. Note the following when using get:
1 For get requests (or any request involving url-based parameters), The passed parameters must be processed by the encodeURIComponent method. For example: var url = "update. php? Username = "+ encodeURIComponent (username) +" & content = "+ encodeURIComponent (content) +" & id = 1 ";
Note the following when using Post:
1. set the Context-Type of the header to application/x-www-form-urlencode to ensure that the server knows that there are parameter variables in the object. the SetRequestHeader ("Context-Type", "application/x-www-form-urlencoded;") of the XmlHttpRequest object is usually used ;"). Example: xmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");
2. the parameter is a key-value pair with one-to-one correspondence between names and values. Each pair of values is separated by an ampersand. for example, var name = abc & sex = man & age = 18. Note that var name = update. php? Abc & sex = man & age = 18 and var name =? Abc & sex = man & age = 18 is incorrect;
3. the parameter is sent in the Send (parameter) method, for example, xmlHttp. send (name); If the get method is used, xmlHttp is used directly. send (null); 4. server-side request parameters are differentiated between Get and Post. For the get method, $ username = $ _ GET ["username"]; for the post method, $ username = $ _ POST ["username"];