Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Beginners how to use AJAX

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how beginners use AJAX". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Create a XMLHttpRequest object

Nowadays, there are many kinds of browsers, and there are different ways to create XMLHttpRequest, so in order to be compatible with all kinds of browsers, you should also consider all kinds of XMLHttpRequest when creating XMLHttpRequest.

The situation of the browser. At present, the mainstream browsers have IE, Firefox and Opera under Windows, so the code we write should be compatible with these browsers as much as possible. After referring to some materials, I use the

The following methods are used to create XMLHttpRequest objects:

The code is as follows:

/ / define a variable first, and assign the initial value to false to facilitate later judgment of whether the object is created successfully.

Var xmlObj = false

/ / use try to capture the creation failure, and then create it by another method

Try {

/ / use this method to create XMLHttpRequest objects in Mozilla

XmlObj=new XMLHttpRequest

}

Catch (e) {

Try {

/ / if it is not successful, try the way in newer IE

XmlObj=new ActiveXObject ("MSXML2.XMLHTTP")

}

Catch (E2) {

Try {

/ / if you fail, try to use the method in the older version of IE.

XmlObj=new ActiveXObject ("Microsoft.XMLHTTP")

}

Catch (E3) {

/ / if it still fails, then the creation is considered a failure.

XmlObj=false

}

}

}

/ / if the creation of a XMLHttpRequest object fails, remind visitors that the page may not be accessed correctly

If (! xmlObj) {

Alert ("XMLHttpRequest init Failed!")

}

two。 Use XMLHttpRequest to get XML documents

When using XMLHttpRequest to get XML, you need to note that this document must be in the same domain as yourself. My understanding is that it is under the same domain name or in the same directory, if not.

An "access denied" error occurs. At the local height, it is also necessary to run a Web server instead of opening the web page directly in the browser.

The code is as follows:

/ / use the open method to open a request. This method has three parameters, namely, the request method, the URL of the request file and the synchronization mode (? I don't know exactly what it's called:)

/ / the request method can be one of GET,POST,HEAD, because I want to get the file, so I use GET

/ / request the URL of the file. Use the relative path directly.

/ / synchronous mode, indicating whether to wait for the response (false) or continue to execute the following code (true) after the request is issued, that is, the so-called async. The first An of AJAX means asynchronous, so here

Use true

XmlObj.open ("GET", "sample.xml", true)

/ / because the asynchronous mode is used, it is necessary to deal with it when the state of the XMLHttpRequest object changes.

XmlObj.onreadystatechange=function () {

/ / if the status of XMLHttpRequest is 4, it should be from ready, then continue to process

If (xmlObj.readyState==4) {

/ / you need to determine whether the return status is 200 OK. In some cases, if the file does not exist, you need to return 404.

If (xmlObj.status==200) {

/ / all OK, call the processing procedure

DoMyXML ()

}

}

}

/ / send the request. Because it is GET, the content of send is null.

XmlObj.send (null)

3. Use ASP to create XML documents

For the need of dynamic display, dynamic web pages are about to be used. I use ASP.

The code is as follows:

4. Working with XML documents

After getting the XML document, I'm about to get what I need from it, if I get the following XML document from the service:

The code is as follows:

AJAX Study

Study AJAX

What I want is the content of title and content, so I can do something like this:

The code is as follows:

Function DoMyXML () {

Var xmlDoc,items,title,content

/ / get the XML document from the XMLHttpRequest object first

XmlDoc=xmlObj.responseXML

/ / get items again

Items=xmlDoc.getElementsByTagName ("item")

/ / finally, get the desired content according to TagName

/ / if there is more than one item in the XML document, you can use the subscript of the array to indicate which one.

Title=items [0] .getElementsByTagName ("title") [0] .firstChild.data

Content=items [0] .getElementsByTagName ("content") [0] .firstChild.data

}

Well, now that I've got what I want, I can show them.

5. Output processing result

Suppose you have the following HTML document to display what you want to output:

The code is as follows:

AJAX Study

Here, a DIV container with ID as mydisplay is defined to display the output. OK, then go to JS:

[code]

/ /... Connect with DoMyXML

/ / content=items [0].

Var strHTML

/ / organize the content to be displayed first

StrHTML= "Item title:" + title + "Item content:" + content

/ / get the target container, and then set its innerHTML to the content to be displayed

Document.getElementById ("mydisplay") [xss_clean] = strHTML

[/ code]

This is the end of "how beginners use AJAX". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report