ajax

一、请求携带数据

1、前端发送请求数据

• 请求方式
  ==前端和后端交流的方式
  ==用不同的请求方式，接收到的信息是不一样的
• 常见的请求方式
  == GET
  ==POST
• GET
  ==直接在地址栏后面拼接数据
  ==数据格式必须是url编码格式：key1=value1&key2=value2
  ==如果不是url编码格式会自动转换
  ==我们通常把传递数据的key值称之为字段
• POST
  ==在请求主体里传递过去（在地址栏没有）
  ==数据格式理论上没有限制，只要在请求的content-type里面说明数据格式

2、GET和POST的区别

1. 发送数据大小有区别
   POST 不限制数据发送大小
   GET 限制数据发送大小4kb
2. 安全性有区别
   GET 更为安全的一种请求方式
   POST是存在风险的
   （幂等性差异，GET是幂等的，POST是非幂等的）
   （数据放在请求头里还是放在请求体里面差别不大）
3. 性能问题
   POST 性能差
   GET 性能更好
4. 语义化差异
   POST 是 INSERT 行为
   GET 是SELECT 行为

3、php接收请求数据

• php里面有预定义的常量$_GET，来获取GET请求的数据，是一个关联数组
• php里面有预定义的常量$_POST，来获取POST请求的数据，是一个关联数组
• $_REQUEST 接收GRT|POST请求发送数据的常量

二、了解传输协议

1、http/https 传输协议

• 前端通过什么协议和后端沟通
• 后端通过什么协议把数据传递给前端
• 前后端交互，前端给后端发起请求，后端给前端返回响应。无论是请求还是响应的格式都是http规定的格式。

2、一个http请求的步骤

1. 建立连接

基于TCP/IP协议

2. 前端发送请求-request

• 每一个请求都是以请求报文的形式发送

• 请求报文包含内容：
  ==请求行
   ----请求方式 GET/POST/PATCH/PUT/DELETE
   ----请求路径
   ----HTTP传输协议版本 1.1
  ==请求头
   ----对本次请求的一些描述信息
   ----content-type 前端发送给后端的数据格式
   ----cookie 请求时会自动携带
    -----请求头主要是告诉后端请求信息；后端会根据请求信息作出响应的处理；绝大多数的请求头信息都是浏览器已经默认定义好的。
  ==请求空行
   ----分割请求头和请求主体的一个空行
  ==请求主体
   ----前端给后端的数据
   ----请求方式为POST时才会携带请求体

3. 后端返回响应-response

• 每个响应都是以响应报文的形式返回

• 响应报文包含的内容：
  ==响应状态行（状态行）
   ----传输协议版本
   ----响应状态码：
     ----200 成功
     ----404 请求路径错误
     ----304 缓存
   ----对状态码的简单描述：ok
  ==响应报文头（响应头）
   ----对本次响应的一些描述信息
   ----content-type：后端返回的数据格式
   ----content-length：数据的长度
  ==响应报文体（响应体）
   ----后端给前端的数据

4. 断开连接

注意：每次请求都是由前端发起的，四个步骤缺一不可

3、http的协议特征：

无状态协议，无法记录用户信息。

解决方式：cookie技术

三、ajax

1、什么是ajax

a: async 异步
j：javascript
a: and
x: xml
异步的xml和javascript交互手段

• ajax就是js语言和后端交互的一个方法
• 主要作用是无刷新发起浏览器请求，接收服务器响应
• js去请求一个php地址，php返回的内容会直接给到js，通过js将数据内容渲染到页面上
• 当在浏览器输入地址或者域名，浏览器会首先向服务器请求页面数据，如果该页面的js代码中有ajax，js代码会再通过ajax发送请求。
• 如果请求的是html文件，那么服务器会把所有的前端代码发送给客户端，如果请求的是php文件，服务器会把php文件的执行结果发送给客户端

2、发送ajax请求的步骤—4步

1. 创建ajax对象

• 语法：new XMLHttpRequest()
• 实例化构造函数，返回一个ajax对象，实例化对象可以发送ajax请求

2. 配置本次请求的信息

• 语法：ajax对象.open(请求方式，请求地址，是否异步)
• 请求方式：post/get 不区分大小写
• 请求地址：你要请求哪个php文件
• 是否异步：可以不写，默认异步

3. 发送请求

• 语法：ajax对象.send()
• 表示把配置好的请求发送出去
• send方法接受一个可选的参数作为请求主体，如果请求方式是GET或者HEAD，则应将请求主体设置为null

4. 接收后端响应

• 因为接收响应需要事件，通过load事件来接收
• 也可以通过readystatechange事件接收
• 语法：ajax对象.οnlοad=function(){ }
• ajax对象的response和responseText属性中存储了响应的数据

var xhr=new XMLHttpRequest();
xhr.open("post","./text.php");
xhr.send();
xhr.addEventListener("load",loadHandler);
// loadHandler这个函数会在当前这个ajax请求完成的时候触发
// 这个ajax请求一完成，那么就会触发函数执行
// 我们在这里就能获取后端返回的数据
function loadHandler(e){
    console.log(xhr);
    console.log(xhr.response);
    console.log(xhr.responseText);
}

四、ajax的同步异步

1、ajax配置请求信息open函数，第三个参数不写或者为true时表示异步，false表示同步。

ajax的同步异步：

1. 同步创建ajax对象
2. 同步配置请求信息
3. 异步发送请求
4. 同步绑定时间，异步执行绑定事件函数

2、请求顺序

• 异步请求：
  ==代码的书写顺序可以是1—>2—>3—>4
  ==也可以是1—>2—>4—>3
• 同步请求
  ==书写顺序必须是1—>2—>4—>3

3、建议：

1. ajax的请求步骤建议书写顺序 1—>2—>4—>3

2. 尽可能不要发送同步请求

五、ajax状态码

1、什么是ajax状态码

http请求时，http的响应状态码表示本次请求是成功还是失败；
ajax的状态码描述当前处于ajax的哪个步骤

2、怎么获取ajax状态码

• 语法：ajax对象.readyState

• 有哪些状态码：
  == 0：表示你创建了一个ajax对象成功了
  == 1：表示你配置信息成功了（也就是执行完了open方法）
  == 2：表示响应体已经回到了浏览器，但是还不能使用（因为此时还是一个响应报文）
  == 3：表示浏览器正在解析响应报文（把响应报文里面的响应体解析出来）
  == 4：浏览器解析响应主题成功，已经可以正常使用了（本次请求结束）

3、监听ajax状态码改变事件

• readystatechange
• 当ajax状态码改变时会触发这个事件

六、ajax的兼容问题

兼容IE低版本，ajax的四个步骤中第一步创建ajax对象和第四步接收响应有兼容问题

1、创建ajax对象

• new XMLHttpRequest() ==标准浏览器
• new ActiveXOeject(‘Micorsoft.XMLHTTP’) ==ie低版本

2、接收响应

• 标准浏览器 load事件中接收
• IE低版本 没有load事件
  ==ie低版本只有readystatechange事件
  ==接收响应只能使用readychangestate事件
  ==需要在事件中判断：
   1.ajax的状态码是4（判断ajax结束了）
   2.http状态码200-299之间（判断本次http请求是否成功）
    ajax对象.status可以获取到本次请求http状态码

//1.创建ajax对象
 var xhr=new XMLHttpRequest(); //标准浏览器
  // var xhr=new ActiveXObject('Micorsoft.XMLHTTP'); //ie低版本

  //2.发送ajax请求
  xhr.open("get","./text.php");

  //3.接收响应
  //标准浏览器
  xhr.onload=function(e){
      console.log(e);
      console.log(xhr.responseText);
  }
  //IE低版本
  xhr.onreadystatechange=function(e){
      if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
          console.log(e);
          console.log(xhr.responseText);
      } 
  }

  //4.发送请求
  xhr.send();

七、发送带有数据的ajax请求

1、get和post携带参数的方式不一样，get携带参数实在地址栏后面拼接，post携带参数是在请求主体里。

2、发送带有数据的get请求

• 因为是在地址栏后拼接，open方法的第二个参数就是请求地址，参数应该直接拼接到请求地址后面
• 地址和参数之间用？分割
• 参数格式：
  key=value的格式
  多个参数用（&）符号分割
  例如：xhr.open(“get”,"./get.php?name=chen&pwd=123456")
• get参数又叫做查询字符串 query string

3、发送带有数据的post请求

• 因为post请求携带的参数是在请求主体里面，所以不需要在地址栏后面拼接
• send()方法的里的参数就是请求主体，将需要携带的参数写在send方法的小括号内
• 参数格式：
  写成key=value格式，需要提前在content-type里说明数据格式
• 声明参数格式语法
  xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’)

八、封装ajax请求函数

1、get方式请求

function ajaxGet(url,fn){
	var xhr=new XMLHttpRequest();
	xhr.open('get',url);
	xhr.onload=function(e){
		fn(xhr.responseText);
	}
	xhr.send();
}

2、post方式请求

function ajaxPost(url,fn.data){
	var xhr=new XMLHttpRequest();
	xhr.open('post',url);
	xhr.onload=function(e){
		fn(xhr.responseText);
	}
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send(data);
}