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

What is the ajax principle and its advantages

2025-02-25 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article is to share with you about the principle of ajax and what its advantages are. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

In the work of using Ajax N many times, but also read some related books, also can be regarded as understanding of it, but has not seriously summarized and sorted out related things, failure!

Recently there is leisure, which can be summarized as follows:

[name]

Ajax is an abbreviation for Asynchronous JavaScript and XML (and DHTML, etc.).

For more information, please move to Ajax: A New Approach to Web Applications

[principle]

To put it simply, you can change the content of the page by using the XmlHttpRequest object to send an asynchronous request to the server, getting the returned data, and using Javascript and DOM to manipulate the elements in the page.

The XmlHttpRequest object is the key because it supports asynchronous requests. XMLHttpRequest is used entirely to make a request to the server. The methods and properties it contains are as follows:

Methods:

Abort () causes the current request to be cancelled

GetAllResponseHeaders () returns a string containing the name and value of the neon response header

GetResponseHeader (name) returns the value of the specified response header

Open (method, url, async, username, password) sets the method and target URL of the request. The request can be declared as synchronous (optional), or it can provide a user name and password based on whose request the window is required (optional)

Send (content) initiates a request with the specified content (optional)

SetRequestHeader (name, value) sets a request header with the specified name and value

Attributes:

Onreadystatechange assigns event handlers to be used when the state of the request changes

ReadyState an integer value indicating the status of the request is as follows:

0mura-not initialized

1mura-loading

2mure-loaded

3Mutual-interaction

4Murray-complete

What responseText returns in the response

ResponseXML if the content is XML, create a XML DOM based on the content

The response status code returned by status from the server. For example, 200 means successful, 404 means not found, refer to HTTP specification

Status text message returned by statusText response

For other introductions to this object, please move to: XMLHttpRequest Overview

[technologies included]

Representation based on XHTML and CSS standards

Use Document Object Model for dynamic display and interaction

Use XMLHttpRequest to communicate with the server asynchronously

Use JavaScript to bind everything

Use XML and XSLT; to exchange and manipulate data.

The above technologies are some widely used technologies, all belong to the older technology, ajax is a combination of these technologies.

[simple example]

The code is as follows:

Function ajax () {var xmlHttp; / / is judged by object, not by browser if (window.XMLHttpRequest) {xmlHttp=new XMLHttpRequest (); / / mozilla browser} else if (window.ActiveXObject) {try {xmlHttp=new ActiveXObject ("Msxmlx2.XMLHTTP"); / / IE older version} catch (e) {} try {xmlHttp=new ActiveXObject ("Microsoft.XMLHTTP") / / IE new version} catch (e) {} if (! xmlHttp) {window.alert ("cannot create XMLHttpRequest object real column"); return false;}} if (! xmlHttp) {alert ("failed to create XMLHttpRequest object!") ; return false;} xmlHttp.open ('POST',' index.php?get_a=2&get_b=3', false); xmlHttp.setRequestHeader ('Content-type',' application/x-www-form-urlencoded;charset=UTF-8;'); xmlHttp.send ("post_a=1&post_b=2"); xmlHttp.onreadystatechange = function () {alert (xmlHttp.readyState);} if (xmlHttp.readyState = = 4) {/ / determine object status var content_obj = document.getElementById ("content") Content_ obj [XSS _ clean] = "data is being processed..."; if (xmlHttp.status = = 200) {/ / Information has been returned successfully, start processing information var returnStr = xmlHttp.responseText; content_ obj [XSS _ clean] = returnStr;} else {/ / abnormal content_ obj [XSS _ clean] = "there is an exception in the page you requested!" ;}

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