原生Ajax的理解与基本使用

2024-01-18 08:54:16

（供自己后期复习使用,如果哪里不对希望大佬指正）

Ajax

1.什么是Ajax

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

2.Ajax的优缺点

优点：1) 可以无需刷新页面而与服务器端进行通信。
2) 允许你根据用户事件来更新部分页面内容。
缺点：1) 没有浏览历史，不能回退
2) 存在跨域问题(同源)
3) SEO 不友好

3.了解http协议

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
约定, 规则

请求报文（请求服务器时，向服务器发送的数据）

重点是格式与参数

行      POST  /s?ie=utf-8  HTTP/1.1 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文（服务器返回的数据）

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

4.Ajax的基本使用

这里用的是Ajax一些基本的方法，若是有时间可以查看官方文档查看其他一些方法

实例化一个xhr对象
var xhr = new XMLHttpRequest();
设置请求行
xhr.open(method,url);
设置请求头
xhr.setRequestHeader(key,val)
例如：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
设置请求体，当请求方式为get的时候，data不需要设置；当请求方式为post的时候，data需要设置
xhr.send([data])
获取响应内容

//对onreadystatechange 的拆解
//on  当...时候
//readystate是xhr对象中的属性，表示状态0  1  2  3  4
//change   改变
  xhr.onreadystatechange = function(){
  //就绪状态当为4的时候表示响应成功回来了
  if(this.readystate === 4){
  //判断响应状态码 200  404  403  500等，在200-300中间都算成功
      if(this.status === 200){
  	// 获取响应信息
  	this.response
       }
  }
}

有关的状态和状态码
1.、readyState：返回当前文档的载入状态

0-(未初始化)还没有调用send()方法

1-(载入)已调用send()方法，正在发送请求

2-(载入完成)send()方法执行完成，已经接收到全部响应内容

3-(交互)正在解析响应内容

4-(完成)响应内容解析完成，可以在客户端调用了

2、 status：HTTP状态码

1XX：信息性状态码，表示接收的请求正在处理

2XX：成功状态码，表示请求正常处理

3XX：重定向状态码，表示需要附加操作来完成请求

4XX：客户端错误状态，表示服务器无法处理请求

5XX：服务器错误状态，表示服务器处理请求出错

码农公寓