Ajax Learning Notes

First, create an AJAX script and use the

Ajax is used to asynchronously load page content, and its technical core is the xmlhttpresponse object

This object cannot be used directly in IE6 and in reduced versions, and the method of creating Ajax objects is as follows:

1. Creating Ajax Objects

function Ajax (url,fnsucc,fnfaild) {    //1. Create Ajax object    var Oajax;    if (window. XMLHttpRequest) {        oajax=new XMLHttpRequest ();    } else{        oajax=new ActiveXObject ("Microsoft.XMLHTTP");    }

Here are some points to note:

About Window

To determine whether the browser supports direct use of XMLHttpRequest, and the judgment method needs to determine whether the browser has this property, so add the window in the IE6 without window will be thrown wrong, the hint does not define this variable, but with the window becomes a property, In the IE6 will not be wrong at most is a undefined property, then you can continue to execute the following statement, and the following statement is the special in IE

2. Connect to the server

2. Connect    the server Oajax.open (' GET ', url,true);

Open (method "' GET ' or ' POST '", url "file name", whether asynchronous "true or false")

It is important to note that the call to the open () method is not a real send request, but a request for a (connection) to be sent, as opposed to the current page executing the code or an absolute path.

3. Send request: Send ()

3. Send the request to the server    oajax.send ();

4. Receive return

* The onreadystatechange event is a monitoring of the request status

When Ajax (client) communicates with the server (or state changes), it invokes//resembles Window.onload
* readyState properties: 0,1,2,3,4 "tell you which step the communication is in."

0: Uninitialized has not yet called the Open () method

1: Start. The open () method has been called, but the Send () method has not been called

2: Send. The Send () method has been called but has not received a response

3: Receive. Partial data response has been received

4: Complete, the full data response has been received, and can be used on the client. "Note: This does not mean that a successful call has been made"
Here we only need to focus on equal to 4 when the corresponding content resolution is complete, can call "does not mean success"

Status property: Request Result "Here is the decision whether to call the data successfully"

If you want to determine success or not, you need to use the status attribute status==200 success

ResponseText Retrieve the result (can be passed as a parameter to the function executed after the call succeeds Fnsucc)

The code is as follows:

4. Receive return    Oajax.onreadystatechange=function () {        if (oajax.readystate==4) {            if (oajax.status==200)                { FNSUCC (Oajax.responsetext);
This defines a function fnsucc passed as an argument to an Ajax function, representing some of the actions we need to do after the load succeeds, and passing the most parameters in the URL to the FNSUCC function so that the foreground uses            }else{                fnfaild ();}        }    }}

In this case, we have successfully created an AJAX script that can be used to invoke the data in the server, and we have a txt text file as an example to call.

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"><title>Ajax case</title><Metaname= "description"content= "William"><Scriptsrc= "Ajax.js"></Script><Scripttype= "Text/javascript">Ajax ('Ajax.txt',//here is the filename to open the file, which is the URL            function(str) {varobtn=document.getElementById ("BTN1"); Obtn.onclick=function() {alert (str);} },//here is the function that must be executed after parsing succeeds where STR is the retrieved content of the file in the server Ajax.txt            function() {alert ("the file was not found in the server")             })//Here is the handler function if the corresponding file is not found in the server  </Script></Head><Body><inputtype= "button"ID= "BTN1"value= "Get txt text content" / >  </Body></HTML>

Click the button to make a successful call!

I. Additional information on the remaining points of knowledge

1. HTTP request method

The get----is used to fetch data, most commonly used to query the server for certain information to append the query's string eucalyptus to the end of the URL to send information to the server (such as browse posts)

e.g:https://www.baidu.com/s?word=%e5%8d%9a%e5%ae%a2%e5%9b%ad&tn=sitehao123&ie=utf-8&ssl_sample= Normal this type of

Post----for uploading data, POST request is to submit data as the principal of the request (e.g. user registration)

In contrast, get security is low, capacity is limited, but post request security, capacity almost unlimited

But the basic 99% of our Ajax is using the Get method.

2. Synchronous and asynchronous

Synchronization: In daily life is a lot of things are together but in the JS synchronization means that things must be one thing to do as in the case of the net card can only wait for the micro Bo after the hair to do other

Async: In daily life is an event that needs to be done step-by-step but asynchronously in JS means that many things can be done at the same time as a tweet can continue to brush the micro Bo dry Other

Ajax is inherently working in asynchronous mode

3. Data type

The type of data currently used by Ajax is basically JSON

Ajax Learning Notes