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

Today, I would like to share with you what are the different related knowledge points of native ajax and Jquery ajax. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Native ajax

Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

Problems with traditional requests (synchronization)

When the network speed is slow or the server is too busy, the client (browser) waits online until it receives the response from the server, and the user experience is not good.

Advantages and functions of Ajax

After using ajax technology, the user experience is good, and at the same time, the pressure on the server can be reduced.

Ajax application scenarios: Baidu search box, Baidu map, check whether users have registered, local refresh of the page, etc.

The difference between an Ajax request and a traditional request:

The traditional way to request:

Request in ajax mode

Ajax principle (method, attribute)

XMLHttpRequest

Let xhr = new XMLHttpRequest ()

Description: creating an ajax object

Open

Xhr.open ('request method', 'request address', true/false); / / true: asynchronous false: synchronous

Description: create a request to the ajax pair.

Send

Syntax:

Xhr.send (string)

Description: the ajax object sends the request to the server. String: for POST requests only

Attribute

ReadyState

Xhr.readyState

Description: in creating ajax objects, configuring ajax objects, sending requests, and receiving server-side response data, each step in the process corresponds to a numeric value, which is the ajax status value.

Included status values:

(1) 0: request has not been initialized and open has not been called yet

(2) 1: the request has been established, but the send has not been sent yet

(3) 2: the request has been sent

(4) 3: the request is being processed. Usually, some data is available in the response.

(5) 4: the response has been completed, and the response from the server can be obtained and used

Tatus

Syntax:

Xhr.status

Description: regardless of whether the AJAX access is successful or not, the HTTP protocol uses the HTTP header information code returned by the server based on the submitted information, which is obtained using "ajax.status"; (consists of the number 1XXline 2XX)

Common status code: 200304404500

ResponseText

Syntax:

Xhr.responseText

Description: get a response from the server

Event

Syntax:

Xhr.onreadystatechange = callback

Description: when a request is sent to the server, whenever the readyState changes, the onreadystatechange event is triggered to handle the response returned by the server

Ajax implementation steps

(1) create an Ajax object

(2) the address and method of Ajax request

(3) send a request

(4) get the data that the server responds to the client

(5) deal with server response data JSON.parse and JSON.stringify

Transfer parameters of get and post of ajax

Get

Syntax:

Xhr.open ('get',' http://www.api.com?username=ujiuye&password=123456')

Description: get parameters only need to be passed according to the key=value format after the url address

The server code is as follows:

Const experss = require ('express')

Const path = require ('path')

Const app = experss ()

App.listen (3000, () = > {

Console.log (--web server works on port 3000--)

});

/ / set ejs:

App.set ('view engine',' ejs'); / / set template engine to ejs

App.set ('views', path.join (_ _ dirname,' views'))

App.engine ('html', require (' ejs'). _ _ express)

/ / Registration user interface:

App.get ('/ zhuce', (req, res) = > {

Res.render ('zhuce.html')

});

/ / check whether the user has registered:

App.get ('/ checkuser', (req, res) = > {

/ / get users:

Let uname = req.query.uname? Req.query.uname:''

If (uname = = 'demo') {/ / registered

Res.send ({"msg": "user registered", "status": 500})

} else {/ / not registered

Res.send ({"msg": "user available", "status": 200})

}

});

The zhuce.html file code is as follows:

Document

Account number:

Password:

Password:

Let usrObj = document.getElementById ('usr')

Let spanObj = document.getElementById ('usrmsg')

/ / step 1: create an ajax object: new XMLHttpRequest ()

Let xhr = new XMLHttpRequest ()

UsrObj.onblur = function () {

/ / obtain the account number entered by the user:

Let usrval = usrObj.value

/ / alert (usrval)

/ / true: indicates asynchronous false: indicates synchronization

/ / step 2: create a request to ajax object: xhr.open ('get/post',' request resource', true/false)

Xhr.open ('get',-/ checkuser?uname=$ {usrval} -, true)

/ / Registration event: handles the response returned by the server

Xhr.onreadystatechange = mytest

/ / step 3: ajax object sends a request to the server: xhr.send ([parameter])

Xhr.send ()

}

Function mytest () {

/ / alert (xhr.readyState)

/ / step 4: the server processes the request and returns the response to the ajax object

If (xhr.readyState = = 4) {

/ / 200: http protocol status code

If (xhr.status = = 200) {/ / indicates that it is normal for the ajax object to interact with the server

/ / step 5: the ajax object gets the returned response and populates it to the relevant location on the page

/ / alert (xhr.responseText)

Let resObj = JSON.parse (xhr.responseText)

SpanObj [XSS _ clean] = resObj.msg

If (resObj.status = = 200) {

SpanObj.style.color = 'green'

} else {

SpanObj.style.color = 'red'

}

}

}

}

That's all of the article "what's the difference between native ajax and Jquery's ajax?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.