ajax的使用

1.为什么需要ajax

• 网速慢的情况下，页面加载时间长，用户只能等待
• 表单提交后，有一项错误，则返回重新填写全部表单
• 页面跳转，重新加载页面，造成资源浪费

2. ajax是什么

• 它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。简单来说就是不用像以前数据需要提交到服务器得通过form表单来提交，而form表单提交带来的影响就是页面全部刷新，而ajax则是局部刷新，需要获取数据刷新的地方使用。

3. ajax的原理

• 以前的请求跟响应是浏览器端跟服务器端直接交流，这会导致浏览器不能响应用户的其他操作，只能干等服务器返回数据，而且这一过程开发人员是不可以控制的。
• 而Ajax的出现则是在浏览器与服务器之间充当了代理作用，替浏览器跑腿发数据，替浏览器接收数据，最后把数据给浏览器响应，而开发人员也就可以通过ajax控制这一过程。

4.创建ajax应用

var xhr = new XMLHttpRequest();
//传入请求方式 get或post 和 请求路径
xhr.open(methods, url);
xhr.send();
//onload事件将会在返回的数据完整接收时调用
xhr.onload = function() {
    //服务器端返回的数据存在responseText
    console.log(xhr.responseText)
}

• IE版本的一些问题
  1. 如果请求的url路径跟上一次重复，则IE浏览器会从缓存中提取上一次数据，尽管你后台响应回来的数据已经发生变化了，IE浏览器也不会管你。(万恶的IE浏览器)
     为了解决这一问题，既然它判断你跟上一次请求路径相同就不重新发请求，那么只需要让请求路径每次都不一样就好了。所以就可以通过路径后面拼接一个随机不重复的字符串。

        xhr.open('get', 'http://www.IEnizhenbang.com?str=' + Math.random());
     

2. 低版本的IE不能使用onload事件监听数据已经获取完毕

   • 这里采用onreadystatechange 事件
   • 顺带附上Ajax状态码供
     0：请求未初始化(还没有调用open())
     1：请求已经建立，但是还没有发送(还没有调用send())
     2：请求已经发送
     3：请求正在处理中，通常响应中已经有部分数据可以用了
     4：响应已经完成，可以获取并使用服务器的响应了

      // 当Ajax状态码发生变化时
      xhr.onreadystatechange = function () {
        // 判断当Ajax状态码为4时
        if (xhr.readyState == 4) {
            // 获取服务器端的响应数据
            console.log(xhr.responseText);
          }
      }
   

5. ajax如何传递参数

1. get请求传参直接在url路径上拼接
   如：http://www.baidu.com?id=lsp&age=100
2. post传参
   • 当请求头参数是application/x-www-form-urlencoded时

       xhr.send('id=lsp&age=100')
   

   • 当请求头参数是application/json时

     var data = {
         name: 'lsp',
         age: 100
       }
     //记得参数传递都要以字符串进行传递
     xhr.send(JSON.stringify(data))
   

6.如何设置请求头

      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode')