From now on, I have learned some Ajax experiences. We plan to use short instances to illustrate the problem. Understanding Ajax requires a lot of theory. I will not talk about it here. There is a lot of information on the Internet. I will list some good information by reference or reference. Okay. First, let's take a look at the xml http request usage. View instances:
Example 1:The following two files are displayed: ajax1.htmland hello.txt.
| Ajax1.html |
<HTML>
<Head>
<Title> Example 1: simple use of XMLHTTP </title> <SCRIPT type = "text/JavaScript">
Function helloajax (localfile ){
VaR XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
XMLHTTP. Open ("get", localfile, false );
XMLHTTP. Send (null );
Alert (XMLHTTP. responsetext );
} </SCRIPT> <Input type = "button" value = "instance 1" onclick = "helloajax('hello.txt ')">
</Body> |
Use NotePad to create a new hello.txt file with the following content: "Hello Ajax! ". Put the two files ajax1.html and hello.txtin the same directory, open ajax1.htm In the IE browser, and click "instance 1". The following figure is displayed:
Example 2:Obtain webpage source code
| Ajax2.html |
<HTML>
<Head>
<Title> instance 2: Obtain the source code of the webpage </title> <SCRIPT type = "text/JavaScript">
Function getsourcecode (){
VaR myurl = Document. getelementbyid ("urlinput"). value;
VaR XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
XMLHTTP. Open ("get", myurl );
XMLHTTP. Send (null );
XMLHTTP.Onreadystatechange= Function (){
If (XMLHTTP. readystate = 4 ){
If (XMLHTTP. Status = 200 ){
Document. getelementbyid ("sourcecode"). value = XMLHTTP. responsetext;
}
}
}
}
</SCRIPT> Enter URL: <input type = "text" id = "urlinput" value = "http://blog.csdn.net/javamxj/" size = "40">
<Input type = "button" value = "view source code" onclick = "getsourcecode ()"> </BR>
<Textarea id = "sourcecode" style = "width: 50%; Height: 200;"> </textarea>
</Body> |
Open this webpage in IE browser and click "View Source Code". If the network is normal, it should be shown as follows.
Note:For simplicity, the preceding two examples can only be opened in IE, which is not applicable to Firefox. In example 1, "helloajax1.html" shows the content in hello.txt using the Alert method. What we need to know is how to do it. The key is xml http request. For a classic article, refer to using the xml http request object. If you are not used to English, let's take a look at the relevant translation [translation] Using xml http request object (2006.1). There is also a Chinese site: XMLHTTP Chinese reference, which is also quite good. Create an XMLHTTP object using ActiveX control in IE, such as var xmlhttp = new activexobject ("Microsoft. XMLHTTP "); if you are using IE6, you can use a more advanced version of XMLHTTP, such as" msxml2.xmlhttp. 7.0 "," msxml2.xmlhttp. 6.0 "and so on. The higher the version, the faster it may be and the better the performance. I don't know how it works. In non-ie browsers, new XMLHttpRequest () is used to create an object (it is said that in IE 7, XMLHTTP will be used as a local JavaScript Object, you can also create it in this way ). After creating an XMLHTTP object, you can use its open method. Its parameter is open (http-method, URL, boolasync, userid, password ). The first two are necessary, and the last two are optional (provided when the server requires authentication ). The parameter meanings are as follows:
HTTP-Method: HTTP communication methods, such as get, Head, post, put, delete, connect, etc., commonly used get and post.
URL: The URL of the server that receives XML data. The URL can contain querystring.
Boolasync: A boolean identifier indicating whether the request is asynchronous. If it is an asynchronous communication method (true), the client will not wait for the server's response; if it is a synchronous mode (false), the client will not perform other operations until the server returns a message,
The default value is true..
Userid: User ID, used for Server Authentication
Password: User Password, used for server authentication on
Example 1.
Note:: The synchronization mode is rarely used. If you are processing local files and the files are not large, you can also use the synchronization mode. However, if you are dealing with files on the network and the network performance is poor, it looks like a dead end. In
Example 2The get method is used to obtain the source code of a webpage file. The asynchronous method is used. Because the asynchronous method is used, the browser does not have to wait for the server's response after sending a request to the server. After the server completes the request, it must tell the requester (browser) that the work has been completed. The use of this method leads to the following function. "XMLHTTP.
Onreadystatechange= Function (){...} "is the key. The onreadystatechange attribute literally means what to do when the status changes. It registers a callback function and calls it once the request is complete. This function is used in asynchronous mode. If synchronous mode is used, it is unnecessary to use this function. Let's take a look at how to handle the server. When XMLHTTP is ready to 4 and the HTTP status code is 200, the response obtained from the server is displayed in the textarea of the webpage in text format.
Five States of readystate:0: the request is not sent (before open () is called ).
1: The request has been created but has not been issued (before sending () is called ).
2: The request is being processed (the content header can be obtained from the response ).
3: The request has been processed, and some data is usually available in the response, but the server has not yet completed the response.
4: The response has been completed. You can access the server response and use it.
Some common status codes are:200-the server returns the webpage successfully
404-the requested webpage does not exist
503-server timeout
Note:Because the get method is used to submit data, you can send data through the URL itself. Here, the parameter of the send () method is null or "". If the POST method is used to submit data, send () the parameters of the method are the data to be submitted.
EncodingNow, add a line of Chinese characters to the hello.txt file, for example, "Welcome to javamxj's blog. Refresh ajax1.html and click "instance 1". The second line in the pop-up window is garbled. Open hello.txt with your local code and click "file-> Save as". Note that the file encoding in the "Save as" window is "ANSI". Change it now, select the encoding to Unicode or UTF-8 to save. Click "instance 1" again to see that the Chinese characters are correctly displayed. Change the input URL in ajax2.html to "http://www.baidu.com", click the "view source code" button, you can see the garbled code, note: its source code contains
<Meta http-equiv = Content-Type content = "text/html; charset = gb2312">And "http://blog.csdn.net/javamxj/#contains
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>The two web pages are encoded differently. Because
XMLHTTP encodes response data as a UTF-8 by defaultTherefore, the data of the csdn website is correctly parsed, while that of Baidu is not.
