Ajax学习与理解

摘要：也在年发布了它的国际标准。能够返回具体数字代表看上面的文档，表示服务器返回的数据已经完全接收，或者本次接收已经失败。请求结束，处理服务器返回的数据显示提示加载中上面代码中，等于时，表明脚本发出的请求已经成功。其他情况，都表示请求还在进行中。

想要学习的Ajax内容都在这个教程阮一峰javascript--XMLHttpRequest 对象
应该注意的点

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

AJAX 就是用 JS 发请求

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

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行

使用form发送请求,查看请求的内容

password=123456就是POST请求的第四部分

那有没有什么方式可以实现

get、post、put、delete 请求都行

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

IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求(想用getpost都可以,想以什么形式展示就以什么形式展示)。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest(全局对象)，并被纳入 W3C 规范

XMLHttpRequest使得浏览器有了和软件一样的体验,不局限于看文章和刷新

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

使用 XMLHttpRequest 发请求

服务器返回 XML 格式的字符串(因为当时XML在当时是流行的数据传输格式,后来用json)

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

2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

.

具体来说，AJAX 包括以下几个步骤。

创建 XMLHttpRequest 实例
发出 HTTP 请求
接收服务器传回的数据
更新网页数据

概括起来，就是一句话，**AJAX 通过原生的XMLHttpRequest对象发出 HTTP
请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON** 格式的数据，XML 格式已经过时了，但是 AJAX
这个名字已经成了一个通用名词，字面含义已经消失了。

所有代码都在这里
每一次大的更新可以查看commit
服务器端代码:

if(path === "/"){
    response.statusCode = 200
    let string = fs.readFileSync("./index.html") 
    response.setHeader("Content-Type", "text/html;charset=utf-8")
    response.write(string)
    response.end()
  }

对于响应来说,第四部分始终都是字符串,因为response.write(string)返回的是字符串,我们给浏览器返回了符合html格式的字符串.
然后再设置响应头中的Content-Type,response.setHeader("Content-Type", "text/html;charset=utf-8"),即要求浏览器以HTML的语法解析这段字符串!,所以我们可以设置浏览器使用的解析方法为json,也可设置为xml.所以JSON 是一门语言!!

http请求的路径都是绝对路径.所以都是以/开头

所有代码都在这里
查看commit既有每次迭代的代码

我们请求一个以xml格式解析的字符串,然后看看响应是什么
服务器端代码

else if (path === "/xxx") {
    response.statusCode = 200
    response.setHeader("Content-Type", "text/xml;charset=utf-8")
    response.write(`
    
      Tove
      Jani
      Reminder
      Don"t forget me this weekend!
    
    `)
    response.end()
  }

main.js

let myButton = document.getElementById("myButton");
myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.open("GET","/xxx")//配置request.参数分别为方法和路径
    request.send();//发送请求
})

index.html

    点我
    

当点击点我按钮时,查看发送的请求和收到的响应:

我们将request打印出来,看看结构:
console.log(request)

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。
能够返回0,1,2,3,4,具体数字代表看上面的文档.
4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。
通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

var xhr = new XMLHttpRequest();

if (xhr.readyState === 4) {
  // 请求结束，处理服务器返回的数据
} else {
  // 显示提示“加载中……”
}

上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP 请求已经成功。其他情况，都表示 HTTP 请求还在进行中。

下面我们从时间角度看看这个过程

当我们发送一个/xxx请求,使用的时间为9ms,9毫秒实际上很长,我们看一看在代码中9毫秒可以干什么
在控制台执行

console.time(); 
var a=1 ;  
console.timeEnd();

返回结果为default: 0.008056640625ms,声明一个变量只用了0.008ms

打印一句话只用了1ms

所以9ms对于浏览器来说,对于代码来说是很长的,可以做很多事情.

接下来看看readyState属性在一次请求中的变化过程

let request = new XMLHttpRequest();
    request.open("GET","/xxx")
    request.send();
    setInterval(()=>{//在发送请求的过程中,每一毫秒问一下
        console.log(request.readyState);
    },1)

结果为:

readyState在这个过程中从1变为4
readyState各个值的含义

刚刚只显示了1和4的原因是因为2,3太快,比一毫秒还快

01234这四个状态是逐个经过的
我们只需要记住4,4代表请求已经把响应下载完毕了

XMLHttpRequest.onreadystatechange = callback;

当 readyState 的值改变的时候，callback 函数会被调用。

例子:

var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send();

XMLHttpRequest.DONE就是4

onreadystatechange测试
把监听函数往上写,这样就不会错过每一个readyState的变化

myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{//把监听函数往上写,这样就不会错过每一个readyState的变化
        console.log(request.readyState);
    }
    request.open("GET","/xxx")//配置request.参数分别为方法和路径
    request.send();//发送请求
    // console.log(request)
})

打印结果为1,2,3,4
4代表请求已经把响应下载完毕了,但是请求成功和失败还要看status状态码是大于200小于300还是大于400

 request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("请求和响应都完毕了");
            if ( request.status>=200&&request.status<=400){
                console.log("说明请求成功");
                console.log(request.responseText);//打印响应的第四部分,字符串
            }else if(request.status>=400){
                console.log("响应失败");
            }
        } 
    }

但是xml结构不方便,需要使用DOMapi去获取数据.现在使用json

什么是json:
json是一门数据格式化语言,用来表示数据
https://www.json.org/
轨道图

js与json的区别:

以下都是合法的json语法:

"hi"
null
["a","b"]
{"name":"马涛涛","isBoy":true}
下面不符合!
{"x":"y"}
必须双引号

接下来我们返回一个符合json语法的字符串

else if (path === "/xxx") {
    response.statusCode = 200
    response.setHeader("Content-Type", "text/xml;charset=utf-8")
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
        "bool":true,
        "arr":["a",1,2,3],
        "num":3
      }
    }
    `)
    response.end()

使用window.JSON这个API,把符合json语法的字符串转化为js对应的值
这个API就像window.document.getElementById一样,是浏览器提供的api
修改一下main.js将json转化为

if ( request.status>=200&&request.status<=400){
                console.log("说明请求成功");
                console.log(request.responseText);
                console.log( typeof request.responseText);//string

                let string = request.responseText;
                //把符合json语法的字符串转化为js对应的值
                let object2 = window.JSON.parse(string);
                console.log( typeof object2)
                console.log(object2)
            }

这样我们就可以用object.note.from取到"mataotao"这个字符串

http响应第四部分永远是字符串,知识写的这个字符串刚好符合json对象的语法

一般面试大概率会问这个问题,写不对一定过不了面试

下面四句代码一定要记住:

myButton.addEventListener("click",(e)=>{
//这四句一定要记住
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{
    if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
    console.log(request.responseText)
  }
    }
    request.open("GET","/xxx")//配置request.参数分别为方法和路径
    request.send();//发送请求
//这四句一定要记住
})