ajax请求参数格式

• post请求参数格式

  • application/x-www-form-urlencoded

    # 格式样式
    name=lmk&age=18&sex=男

  • application/json

    {name:'lmk',age:'18',sex:'男'}

  • multipart/form-data

  • text/xml
    这两个在请求的时候可能会不常用

  • json参数问题

  • json参数传递时需要转成json字符串才可以传递参数（参数是以字符串的形式进行传递的）

  JSON.stringify(); # 将json对象转换成json字符串

  • get请求是不能提交json对象数据格式的，因为传统网站的表单提交是不支持json对象数据格式的

获取服务端的响应信息

• ajax状态码
  • 在创建ajax对象，配置ajax对象，发送请求，以及接受完客户端的响应数据时，这个过程中每一个步骤都会对应一个数值，这个数值就是ajax状态码
    • 0 请求初始化(还没有调用open)
    • 1 请求已经建立,但是还没有发送（还没有调用send）
    • 2 请求已经发送了
    • 3 请求正在处理中，通常响应中已经有部分数据可以用了
    • 4 响应已经完成，可以获取并使用服务器响应了
• 获取ajax状态码

  xhr.readyState # 获取ajax状态码
  # 由于请求发送时，状态码是不停变动的，所以提供了一个事件 "onreadystatechange" 当ajax状态码发生变化时自动触发改事件
  # 定义事件，监听状态码
  xhr.addEventListener('readystatechange',function(){
      # 这里面可以if判断，通过 xhr.readyState获取状态码，根据状态码进行相应的操作
  })

• onload 和 onreadystatechange的区别
• 都可以返回服务端的响应信息
• onload不兼容低版本的浏览器，不需要判断ajax状态码，每次只调用一次
• onreadystatechange 兼容低版本浏览器，需要判断ajax状态码，能多次调用

ajax错误处理

• 通常ajax发生错误，一般是这几个问题
  1.网络畅通，服务器能够收到请求，服务器端反水的结果不是预期的结果
  • 可以判断ajax状态码，分别进行处理

    xhr.readyState # 获取ajax状态码
    xhr.status # 获取http状态码
    # ajax状态码，表示ajax请求过程的状态，ajax对象返回的
    # http状态码，表示请求的处理结果，服务器端返回的

    2.网络通畅，服务器没有接受到请求，返回404状态码
  • 检查请求地址是否错误
    3.网络通畅，服务器能够接受到请求，但是返回了500状态码
  • 服务器错误，调试后端
    4.网络中断，请求无法发送到服务端
  • 会触发xhr对象下面的onerror事件，在onerror事件处理函数进行处理
  • 触发该事件的前提是要在前端ajax请求写上 error事件

    xhr.addEventListener('error',function(){
        alert('网络中断')
    })

ajax缓存问题

• 在ie低版本中 ajax有一个严重的缓存问题，即使在请求地址不发生变化的情况下，有一次记请求发送到了服务器，后续请求会直接从浏览器缓存中获取结果，即使服务器更新了该数据，但是客户端看到的依旧是旧的数据
• 解决方法
• 在前端使用ajax发送请求时，加上随机参数，这样每次访问就不会从换从中提取数据了
  

  xhr.open('get,'http://127.0.0.1/?=+Math.random()) # 使用随机数来发送请求，这样就不会有缓存问题了
  # ie永远的神。。。。

同步和异步

• 同步
• 就是代码只有上一层执行后，下一层才会执行
• 异步
• 异步代码虽然会花时间去执行，但是主程序不回等待异步代码执行完后在继续执行后续代码，而是直接执行后面的代码，当后面的代码执行完毕后，才看看异步代码是否返回结果，如果有结果就直接调用结果，没有则等待完成