POST & GET & Ajax Full Solution

Get&post&ajax Full Solution One, POST and get differences

Get:get method commits data is unsafe and the data is placed on the request line. The client segment Address bar is visible, and the data limit submitted by the Get method is within 255 characters. The parameters are clearly visible after the URL, and the body part of the HTTP request is empty. Just the Head section shows an HTTP basic message.

The data submitted by the Post:post method is placed within the message body, the client is not visible, and the data size of the post submission is unlimited.

The HTTP request that is sent by post is not followed by the URL, but is stored in the body portion of the HTTP request, and the request parameter is stored in the body in the form of a get-like method.

Second, the use of Ajax (1) The use of native Ajax

① Creating a XMLHttpRequest Object

② ready to send the requested data: URL

③ calling the open method of the XMLHttpRequest object

④ calling the Send method of the XMLHttpRequest object

⑤ adding onreadystatechage response function to XMLHttpRequest Object [ReadyState property of XMLHttpRequest Object]

⑥ is inferred if the response is available: XMLHttpRequest Object Status Property value is 200

⑦ Print response Result: responsetext

Tip: XMLHttpRequest is not supported in Ie5,ie6. To be created by ActiveXObject ("Microsoft.XMLHTTP"), the effect is the same.

So in order to be compatible with all browsers, we generally write this:
var xmlhttp;

if (window. XMLHttpRequest) {
XMLHTTP = new XMLHttpRequest ();

}else{

XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");

}

Detailed code such as the following:

<script> var xmlhttp;        function Loadxmldoc (URL) {xmlhttp = null; if (window.            XMLHttpRequest) {//code for IE7, Firefox, Opera, etc.        XMLHTTP = new XMLHttpRequest (); } else if (window.        ActiveXObject) {//code for IE6, IE5 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");            } if (xmlhttp! = null) {Xmlhttp.onreadystatechange = State_change;            Xmlhttp.open ("GET", url, True);        Xmlhttp.send (NULL);        } else {alert ("Your browser does not XMLHTTP."); }} function State_change () {if (xmlhttp.readystate = = 4) {//4 = "Loaded" if (Xmlhttp.status = =                () {//= "OK" document.getElementById (' A1 '). InnerHTML = Xmlhttp.status;                document.getElementById (' A2 '). InnerHTML = Xmlhttp.statustext;            document.getElementById (' A3 '). InnerHTML = Xmlhttp.responsetext;            } else {    Alert ("Problem retrieving XML data:" + Xmlhttp.statustext); }}}</script>

(2) Use of Ajax in jquery

$.ajax ({    type: ' Post ',//get, post    URL: '/index.php/forum/checknote ',    data: {' note_title ': Title, ' Note_ Content ': Content, ' note_type ': type, ' Srcurl ': Srcurl, ' note_author_id ': ' 123456 '},    success:function (msg) {        Alert ("Post success!")
"+ msg");        Location.href = '/index.php/forum/notelist?type= ' + type;    },    error:function (XMLHttpRequest, Textstatus, ERRORTHROWN,MSG) {        alert (xmlhttprequest.status);        alert (xmlhttprequest.readystate);        alert (textstatus);        alert (errorthrown);        Alert (msg);    });

Ajax, which is relatively primitive xmlhttprequest,jquery, is more streamlined and easier to use.

Third, the JSON return value of Ajax and its parsing

Introduction: browsers and Web pages often require asynchronous interaction by the previous XMLHttpRequest. We basically know how to have a Web page that sends data to the server. However, you also need to return from the server to the Web page. For example, when a user logs in. In addition to the server Authentication login account, password. It is also necessary to update the page and the status information of the successful login, which we often encounter. At this point, you need to use the Ajax callback function and parse the returned JSON.

First, it is necessary to introduce some basic parameters of JSON and Ajax:

What is JSON?

JSON's original: JavaScript Objectnotation,json uses a key/value structure. Simple and easy to read, it is a lightweight data interchange format used primarily for exchanging data with the server.

Similar to XML. It is an independent language that has a great advantage in transmitting data across platforms.

JSON format: $res ={' name ': ' Helios ', ' age ': ' n ', ' sex ': ' Man '};

The format is very strict. In brackets, each group is separated by commas. A set of colons separated by a colon, preceded by a property value (key), followed by a property value (value).

Multiple sets of JSON:

$info = [
{' name ': ' helios1′, ' age ': ' A ', ' sex ': ' Man '},
{' name ': ' helios2′, ' age ': ' A ', ' sex ': ' Man '},
{' name ': ' helios3′, ' age ': ' A ', ' sex ': ' Man '}
];

Several basic parameters of Ajax: (1) callback function: function type

Among them, success, error is a callback function, is a relatively frequent use of several callback functions, in addition, there are beforesend, Datafilter, complete.

The functions of each function are as follows:

• Beforesend is called before the request is sent, and a xmlhttprequest is passed in as a parameter.
• Error is called when the request is faulted. Incoming XMLHttpRequest object, describing a string describing the type of error and an exception object (if any)
• Datafilter is called after the request succeeds.

  The value returned by the incoming data and the "DataType" parameter.

  And you must return the new data (possibly processed) to the success callback function.

• Success called after the request.

  The data after the incoming return, and a string that includes the success code.

• Complete the function is called after the request has been completed. Regardless of success or failure.

  The incoming XMLHttpRequest object, and a string that includes a success or error code.

(2) Datatype:string type

Expected data type returned by the server. Assuming that it is not specified, JQuery intelligently infers itself based on the HTTP packet MIME information, as XML MIME types are recognized as XML.

In 1.4, JSON generates a JavaScript object. Script will then run it. The data returned by the server is then parsed based on this value. Passed to the callback function. Available values:

• "XML": Returns an XML document that can be processed with jQuery.
• HTML: Returns plain text HTML information, including script tags that run when the DOM is inserted
• "Script": Returns plain text JavaScript code. Do not actively cache the results themselves. Unless the "cache" parameter is set. Note: When a remote request is not in the same domain, all POST requests are converted to GET requests. (because the script tag of the DOM will be used to load)
• "JSON": Returns the JSON data.

• Complete the function is called after the request has been completed, regardless of success or failure. The incoming XMLHttpRequest object, and a string that includes a success or error code.
• "JSONP": Jsonp format.

  When calling a function using JSONP form, such as "myurl?callback=?" JQuery will voluntarily replace itself? is the correct function name. To run the callback function.

• "Text": Returns a plain text string

It is important to note that datatype must be consistent with the data format sent by the server, assuming datatype is specified as JSON. The sent format is also text. Then it is not possible to successfully receive success with success.

PHP Output <?php$data = array (' name ' = ' = ' xiong ', ' id ' = ' 123456 ');p rint_r ($data);

<!--HTML code--><! doctype>
Perform such as the following:

In such a case, the error callback is run. and return to ParseError. Assuming the situation, we just need to send or receive the data format for a change.
Here are a few ways to solve this type of problem:
① uses Json_encode () in PHP to convert the array to a JSON-style string. The datatype is then set to receive in JSON format in Ajax. Recommended
PHP Code:
<?php$data = Array (' name ' = ' xiong ', ' id ' = ' 123456 ');//print_r ($data); Echo Json_encode ($data);

JS Code:
$ (' button '). Click (function () {    $.ajax ({        type: ' POST ',        URL: ' test.php ',        dataType: ' JSON ',        Success:function (data) {            console.log (data);            Console.log (data.name);            Console.log (data[' name ');        },        error:function (XMLHttpRequest, Textstatus, Errorthrown) {            Console.log ( XMLHttpRequest);            Console.log (textstatus);            Console.log (Errorthrown);})    ;
Perform such as the following:

② uses Json_encode () in PHP to convert the array to a JSON-formatted string, and then in Ajax, DataType is set to the text format to receive. Then use eval to convert to a JSON object.
PHP code Ibid.
JS Code:
$ (' button '). Click (function () {    $.ajax ({        type: ' POST ',        URL: ' test.php ',        dataType: ' Text ',        Success:function (data) {            var jsonobj = eval ("(" + Data + ")");            Console.log (typeof data + data);            Console.log (jsonobj);            Console.log (jsonobj.name);            Console.log (jsonobj[' name ');        },        error:function (XMLHttpRequest, Textstatus, Errorthrown) {            Console.log (XMLHttpRequest);            Console.log (textstatus);            Console.log (Errorthrown);})    ;
Perform such as the following:

Iv. References Link:
[1]. In-depth understanding of the HTTP protocol: http://www.blogjava.net/zjusuyong/articles/304788.html
[2].thinkphp in Ajax and PHP response process specific explanation: http://www.jb51.net/article/58274.htm
[3]. Jquery_1.9.1_ Manual Cn.chm
[4].ajax processing data format JSON format http://www.woshinannan741.com/?
p=129
 
POST &amp; GET &amp; Ajax Full Solution