От 0 до AJAX, этого достаточно! (Продвинутый III)

// 1. Create an object of type XMLHttpRequest -- equivalent to opening a browser
var xhr = new XMLHttpRequest()
// 2. Open the connection to a web site - the equivalent of entering an access address in the address bar
xhr.open('GET', './time.php')
// 3. Send a request through a connection -- the equivalent of a return or click-through request
xhr.send(null)
// 4. Specify the XHR state change event handler --- equivalent to the operation after processing web page rendering
xhr.onreadystatechange = function () {
// The readyState of XHR determines whether the response to the request has been received or not.
if (this.readyState === 4) {
// Get the response body of the response through the responseText of XHR
console.log(this)
}
}

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// Initialize request proxy object
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// The open method has been invoked to establish a connection to a specific port on the server side
xhr.send()
xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// The response header of the response message has been received
// You can get it.
// console.log(this.getAllResponseHeaders())
console.log(this.getResponseHeader('server'))
// But they haven't got the body yet.
console.log(this.responseText)
break
case 3:
// => 3
// The response body of the response message being downloaded may be empty or incomplete.
// Dealing with responders here is not safe (unreliable)
console.log(this.responseText)
break
case 4:
// => 4
// All OK (the entire response message has been downloaded in full)
// Here the response body is processed
console.log(this.responseText)
break
}
})

xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// Follow-up logic...
}
}

// Setting the request line of the request message
xhr.open('GET', './time.php')
// Setting the request header
xhr.setRequestHeader('Accept', 'text/plain')
// Setting Request Body
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// Getting Response State Code
console.log(this.status)
// Getting Response State Description
console.log(this.statusText)
// Getting response header information
Console. log (this. getResponseHeader ('Content Type')// Specify response header
Console. log (this. getAllResponseHeader ()// all response headers
// Get the response volume
Console. log (this. responseText)// text form
The console. log (this. responseXML) // XML form, which is unnecessary to understand
}
}

var xhr = new XMLHttpRequest()
// GET request passing parameters usually use question mark passing parameters
// Here you can add parameters after the request address to pass data to the server.
xhr.open('GET', './delete.php?id=1')
// Generally, when GET requests do not need to set the response body, it can pass null or not at all.
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
// In general, URLs pass data of parametric nature, while POST is usually business data.

var xhr = new XMLHttpRequest()
// The first parameter of the open method is to set the method of the request.
xhr.open('POST', './add.php')
// Set Content Type in the request header to application/x www form urlencoded
// Identify the body of the request as urlencoded so that the server can receive the data
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// Data that needs to be submitted to the server can be passed through the parameters of the send method
// Format: key1 = value1 & key2 = Value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

Synchronization: A person can only do one thing at the same time, perform some time-consuming operations (no need to watch) and do nothing else, just wait.
stay
异步:在执行一些耗时的操作(不需要看管)去做别的事,而不是等stay

console.log('before ajax')
var xhr = new XMLHttpRequest()
// The default third parameter, true, implies asynchronous execution
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// The code here is finally executed
console.log('request done')
}
}
console.log('after ajax')

console.log('before ajax')
var xhr = new XMLHttpRequest()
// Synchronization
xhr.open('GET', './time.php', false)
// Synchronization 执行需要 先注册事件再调用 send,否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// The code here is finally executed
console.log('request done')
}
}
xhr.send(null)
console.log('after ajax')

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

/**
* Send an AJAX request
*@ Param {String} method request method
*@ Param {String} URL request address
*@ Param {Object} params request parameters
*@ Param {Function} done request completes what needs to be done later (delegation/callback)
*/
function ajax (method, url, params, done) {
// Converting Uniform to Capital for Follow-up Judgment
method = method.toUpperCase()
// Object-based parameter conversion to urlencoded format
var pairs = []
for (var key in params) {
pairs.push(key + '=' + params[key])
}
var querystring = pairs.join('&')
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
ActiveXObject('Microsoft.XMLHTTP')
xhr.addEventListener('readystatechange', function () {
if (this.readyState !== 4) return
// Trying to parse the response volume in JSON format
try {
done(JSON.parse(this.responseText))
} catch (e) {
done(this.responseText)
}
})
// If it is a GET request, set the URL address question mark parameter
if (method === 'GET') {
url += '?' + querystring
}
xhr.open(method, url)
// Set the body of the request if it is a POST request
var data = null
if (method === 'POST') {
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
data = querystring
}
xhr.send(data)
}
ajax('get', './get.php', { id: 123 }, function (data) {
console.log(data)
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) {
console.log(data)
})

$.ajax({
url: './get.php',
type: 'get',
dataType: 'json',
data: { id: 1 },
beforeSend: function (xhr) {
console.log('before send')
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log('request completed')
}
})

Foo (['I','Yes','You','Original','Ben','Need','Want','Of','Number','According')