4 steps to teach you how to use AJAX

怪我咯
Release: 2023-03-14 11:40:01
Original
1803 people have browsed it

AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

AJAX is a technology that can update parts of a web page without reloading the entire web page. [1]

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

This article mainly introduces the relevant knowledge about the use of AJAX.

AJAX is an asynchronous transmission, partial refresh is very convenient and has many uses!

First, there are 4 steps to use AJAX:

1. Create an AJAX object

var xmlHttp = new XMLHttpRequest();

2. Establish a connection ('submission method', 'Url address')

##xmlHttp.open('get','./ AJAX_XML.xml');

3. Determine ajax preparation status and status code

xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState==4 && xmlHttp.status==200) { } }
Copy after login

4. Send request

xmlHttp.send(null); //get method parameter is null, post method, the parameter is the submitted parameter

The following is an asynchronous submission of the user name (after entering the user name, the asynchronous submission will be judged by the background, and the front desk will immediately prompt whether it has been registered, and it will be judged when there is no need to submit!)

Submit by GET method

xx.html

Copy after login

Username:

< input type="text" name="" id="username">

xx.php

 
Copy after login

1. IE does not support Chinese

2. =, & are confused with the keywords of the requested string.

POST submission

xx.html

Copy after login

Username:

xx.php

Copy after login

1. Send data through send()

2. SetRequestHeader() must be set to The passed parameters are converted into XML format

3. Post submission can directly submit Chinese without transcoding

4. The characters in the post request will also be consistent with the & and = characters in the URL. Confused, so it is recommended to use encodeURIComponent() encoding

5. At the same time as POST submission, you can submit GET

Solution

IE does not support Chinese =, & and The keywords of the requested string are confusedProblem

Just encode in js through encodeURIComponent().

window.onload=function(){ document.getElementById('username').onblur=function(){ var name=document.getElementById('username').value; name=encodeURIComponent(name); //编码 var req=new XMLHttpRequest(); req.open('get','4-demo.php?name='+name); req.onreadystatechange=function(){ if(req.readyState==4 && req.status==200){ alert(req.responseText); } } req.send(null); //如果send()方法中没有数据,要写null } }
Copy after login

1. req.responseText: Get the returned string

2. req.responseXML: Get the returned data according to the DOM structure

Pay attention to the difference between post/get submission methods!

The above is the detailed content of 4 steps to teach you how to use AJAX. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!