发送请求的四个步骤

• 四个步骤

  • let xhr = new XMLHttpRequest()

  • xhr.open(请求方式,请求地址，是否异步)

  • xhr.send()

  • xhr.onload = function(){}

  • xhr.onreadystate = function(){
    if(xhr.readystate===4){
    console.log(xhr.responseText)
    }

    }

ajax的状态码

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

ajax带有参数的get和post请求

• 发送带有参数的get请求

  • 参数拼接在地址后面
  • ?key1=value1&key2=value2

• 发送带有参数的post请求

  • 参数写在请求体里面,要设置请求头
  • xhr.setRequestHeader(‘content-type’,‘appliaction/x-www-form-urlencoded’)
  • xhr.send(‘key1=value1&key2=value2’)

ajax的兼容处理

• 兼容处理，将来在你开发过程中
  == 可能兼容ie678浏览器
  == 就要处理兼容问题
• 我们的ajajx有两个地方不兼容
  1 创建ajax对象的时候不兼容
  + new XMLHttpRequest =》 标准浏览器
  + new ActiveXObject =》 ie低版本
  2 接收响应的不兼容
  + 标准浏览器 =》onload事件
  + ie低版本 =》没有onload事件
  ==ie低版本只有onreadystatechange事件
  ==ie低版本接收响应只能使用onreadystatechange事件
  == 在这个事件里面进行判断
  + 判断ajax是否结束了 -》ajax的状态码为4就是结束了
  + 判断本次http请求成功了 =》http的响应状态码200-299之间
  == xhr.status 记录的就是本次请求的http的状态码
  IE的问题
  == 创建ajax对象这个事情
  == 必须是真实的IE678浏览器才没有
  == 如果你使用IE11浏览器的模拟器，但是浏览器的内核依旧是IE11的内核
  == 你看不出来他不能用

同源策略

• 概念：浏览器对js的一种限制，防止跨站攻击

• 当我们访问其他服务器的时候会触发同源策略(也叫跨域请求)

解决同源策略的三种方法

• cors - 后端设置允许跨域请求头

  • php设置以下：
        // 允许哪些域名请求我
        header("Access-Control-Allow-Origin:*");
        // 允许哪些请求方式
        header("Access-Control-Request-Methods:GET,POST,PUT,DELETE,OPTIONS");
        // 允许携带哪些请求头信息
        header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
    

• proxy - 在同源服务器设置代理服务器

  • 例如在nginx的配置文件里书写代理配置：
    location = /tv {
        proxy_pass http://127.0.0.1/data/proxy.php;
    }
    请求地址书写/tv就可以通过nginx服务器帮我们访问我们所需要的东西
    

• jsonp - 提起设置一个函数，script请求后端的地址，后端返回一个函数调用，传入的实参就是要给前端的数据

  • 在js中书写一个函数，通过JavaScript的src引入需要的php文件，php文件把数据写成js函数形参，当引入php文件后执行函数，就可以拿到后端返回的数据