ajax是什么牌子的,学习Ajax

1 由来

以前网站开发人员如何发请求？

用 form 可以发请求，但是会刷新页面或新开页面

用 a 可以发 get 请求，但是也会刷新页面或新开页面

用 img 可以发 get 请求，但是只能以图片的形式展示

用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示

用 script 可以发 get 请求，但是只能以脚本的形式运行

有没有什么方式可以实现

get、post、put、delete 请求都行

想以什么形式展示就以什么形式展示

微软的突破

IE 5 率先在 JS 中引入 ActiveX 对象(API)，使得 JS 可以直接发起 HTTP 请求。

随后 Mozilla、 Safari、 Opera 也跟进(抄袭)了，取名 XMLHttpRequest，并被纳入 W3C 规范

2 Ajax

Jesse James Garrett 将如下技术取名叫做 AJAX：异步的 JavaScript 和 XML

使用 XMLHttpRequest 发请求

服务器返回 XML 格式的字符串(前端的话，大多数为JSON)

JS 解析 XML，并更新局部页面

JSON 是一种抄袭了javascript的语言

1.JSON没有抄袭function和undefined和symbol

2.JSON的字符串首位必须是" "

3.JSON有六种数据类型， number,string,boolean,object,null,array

如何使用 XMLHttpRequest 发送请求

前端代码

myButton.addEventListener('click', (e)=>{

let request = new XMLHttpRequest()

request.open('get', '/xxx') // 配置request

request.send()

request.onreadystatechange = ()=>{

if(request.readyState === 4){

console.log('请求响应都完毕了')

console.log(request.status)

if(request.status >= 200 && request.status < 300){

console.log('说明请求成功')

console.log(typeof request.responseText)

console.log(request.responseText)

let string = request.responseText

// 把符合 JSON 语法的字符串

// 转换成 JS 对应的值

let object = window.JSON.parse(string)

// JSON.parse 是浏览器提供的

console.log(typeof object)

console.log(object)

console.log('object.note')

console.log(object.note)

}else if(request.status >= 400){

console.log('说明请求失败')

}

}

}

})

后端代码

}else if(path==='/xxx'){

response.statusCode = 200

response.setHeader('Content-Type', 'text/json;charset=utf-8')

response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')

response.write(`

{

"note":{

"to": "小谷",

"from": "方方",

"heading": "打招呼",

"content": "hi"

}

}

`)

response.end()

同源策略

当我们用request.open('get','https://www.baidu.com)发送请求,会出现这种情况

image.png

image.png

请求成功，但是response却收不到

image.png

,

http://baidu.com:80 可以向 http://baidu.com:81 发 AJAX 请求吗 no

这是因为ajax不允许发送不同源的请求，而form，img，script等上面提到的请求方式可以向其他域名请求是因为他们只能发送请求而不能收到响应内容。

浏览器必须保证

只有 协议+端口+域名 一模一样才允许发 AJAX 请求

那怎么才可以发送Ajax请求到其他的网站呢？

CORS

CORS可以告诉浏览器，我俩一家的，别阻止他

突破同源策略 === 跨域

Cross-Origin Resource Sharing

C O源 R S

CORS 跨域

现在我们用两个网站 frank.com:8001和jack.com:8002同时向向jack.com:8002/xxx(即jack的后台)发送Ajax请求

jack.com

jack.com

jack.com

image.png

frank.com:8001 访问jack.com:8002/xxx

frank.com

image.png

但响应失败

image.png

这时我们只要在访问的服务器添加一句

response.setHeader('Access-Control-Allow-Orgin','http://frank.com:8001')

image.png

然后就可以访问成功

image.png

如果需要多个域名跨源

response.setHeader('xxxx','*');

3 实现相对完整的Ajax

首先了解一下http请求和响应格式

HTTP请求的格式

1 动词 路径 协议/版本

2 Key1: value1

2 Key2: value2

2 Key3: value3

2 Content-Type: application/x-www-form-urlencoded

2 Host: www.baidu.com

2 User-Agent: curl/7.54.0

3

4 要上传的数据

说明

请求最多包含四部分，最少包含三部分。(也就是说第四部分可以为空)

第三部分永远都是一个回车(\n)

动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等

这里的路径包括「查询参数」，但不包括「锚点」

如果你没有写路径，那么路径默认为 /

第 2 部分中的 Content-Type 标注了第 4 部分的格式

HTTP响应的格式

1 协议/版本号 状态码 状态解释

2 Key1: value1

2 Key2: value2

2 Content-Length: 17931

2 Content-Type: text/html

3

4 要下载的内容

状态码的种类

1xx 不常用

2xx 表示成功

3xx 表示滚吧

4xx 表示你丫错了

5xx 表示好吧，我错了

状态解释没什么用

第 2 部分中的 Content-Type 标注了第 4 部分的格式

第 2 部分中的 Content-Type 遵循 MIME 规范

根据上面请求响应格式，我们来一步一步实现Ajax(分为四步)

声明并定义XMLHttpRequest对象

let request=new XMLHttpRequest()

配置request

请求格式的第一部分

request.open('get','/xxx') //get请求，路径为/xxx

请求格式的第二部分

request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

判断请求完成还有请求是否成功

请求所处状态

request.readyState // 4

响应格式的第一部分

request.status // 200

request.statusText //OK

响应格式的第二部分

request.getAllResponseHeaders()

request.getResponseHeader('Content-Type')

响应格式的第四部分

request.responseText

发送request

请求格式的第四部分

request.send('请求体‘)//第四部分可以为空 ，可以不传值

封装Ajax

window.jQuery=function(nodeOrSelector){

let nodes={};

nodes.addClass=function () {

}

nodes.html=function () {

}

return nodes;

}

window.jQuery.ajax = function (url, method, body, successFn, failFn) {

let xhr = new XMLHttpRequest();

xhr.open(method, url);

xhr.onreadystatechange = () => {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

successFn.call(undefined,xhr.responseText);

} else if (xhr.status >= 400) {

failFn.call(undefined,xhr);

}

}

}

xhr.send(body);

}

btn.addEventListener('click', (e) => {

window.jQuery.ajax(

'/xxx',

'post',

'a=1&b=2',

(responseText)=>{ console.log(1)},

(xhr)=>{console.log(2)}

)

})

Promise封装Ajax

window.jQuery=function(nodeOrSelector){

let nodes={};

nodes.addClass=function () {

}

nodes.html=function () {

}

return nodes;

}

window.jQuery.ajax = function ({url,method,body,headers}) {

return new Promise(function (resolve,reject) {

let xhr = new XMLHttpRequest();

xhr.open(method, url);

for(let key in headers){

let value=headers[key];

xhr.setRequestHeader(key,value);

}

xhr.onreadystatechange = () => {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

resolve.call(undefined,xhr.responseText);

} else if (xhr.status >= 400) {

reject.call(undefined,xhr);

}

}

}

xhr.send(body);

})

}

btn.addEventListener('click', (e) => {

let obj={

'url':'/xxx',

'method':'post',

'body':'a=1&b=2',

'headers':{

'Content-Type':'application/x-www-form-urlencoded',

'name':'frank'

}

}

window.jQuery.ajax(obj)

.then(

(responseText)=>{

console.log(responseText);},

(request)=>{

console.log(request)}

)

})

4 总结

你才返回对象，你全家都返回对象(Ajax只是返回字符串，只不过字符串刚好符合json对象的语法，后台无法返回对象)

JS 是一门语言，JSON 是另一门语言，JSON 这门语言抄袭了 JS这门语言

AJAX 就是用 JS 发请求

响应的第四部分是字符串，可以用 JSON 语法表示一个对象，也可以用 JSON 语法表示一个数组，还可以用 XML 语法，还可以用 HTML 语法，还可以用 CSS 语法，还可以用 JS 语法，还可以用我自创的语法