ajax学习

什么是ajax

是一种使用js异步获取响应数据,进行页面的局部刷新技术方案

与传统的web应用比较

传统的web应用,当用户发送一个http请求到服务器,(例如提交表单数据),这个时候用户只能等服务器接受到数据,并作出处理,然后返回一个新的页面给用户,在这个过程中用户不能做任何处理,这里面有个问题:** 为什么要返回整个页面给用户进行刷新,而不能只返回用户需要的信息?** 因为那个时候并没有一种机制能够在服务器处理好了数据并返回时,告诉浏览器我的数据返回了,可以进行局部更新了,所以,不得不进行整个页面的刷新,而在这个过程中用户只能等待服务器的数据,不能做任何事情;
而现在有了ajax,它提供了一种机制可以让客户端与服务器进行异步通信,并局部刷新页面,最重要的是可以让我们监听到服务器返回数据的状态,这样就可以不需要每次刷新整个页面

ajax的原理

ajax的核心是JavaScriptXMLHttpRequestDOM对象;通过XMLHTttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后通过JavaScript操作DOM来更新页面
简而言之就是:

发送一个ajax请求的步骤:

  1. 创建一个XMLHttpRequest对象
  2. 通过onreadystatechange函数对象监听状态变化
  3. 调用open()设置配置信息,包括:get/post、url+data和true(表示采用异步方式)
  4. 调用send发送请求
    示例代码如下:
var xhr = new XMLHttpRequest();  // 创建一个XMLHttpRequest请求
// 监听状态变化
  xhr.onreadystatechange = function(){
    // readyState === 4表示一个请求已经结束
    if (xhr.readyState === 4) {
      // status表示该请求的
      if (xhr.status >= 200 && xhr.status < 300) {
        // 获得响应数据
        var data = xhr.responseText;
        if (dataType === 'json') {
          data = JSON.parse(xhr.responseText);
        }
        // 数据传输正确处理
        onSuccess(data);
      } else{i
        // 数据传输错误处理
        onError();
      }
    }
  }
  // 这里是判断发送的是get请求还是post请求,
  if (method === 'get') {
    url += '?';
    for (let key in data) {
      url += key + "=" + data[key] + "&";
    }
    url = url.substr(0, url.length - 1);
    // open函数主要是设置配置信息
    xhr.open(method, url, true);
    // send表示发送请求
    xhr.send();

  } else if (method === 'post') {  // 这是采用post发送
    let sendData = "";

    for (let key in data) {
      sendData += key + "=" + data[key] + "&";
    }

    sendData = sendData.substr(0, sendData.length - 1);

    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(sendData);
  }

注意点:

  1. 发送get请求时,传送的数据是以键值对的形式放在url中的,而post请求,传送的数据是以键值对的形式放在send(函数)中发送出去的
  2. post请求一般设置为如下xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  3. 设置setRequestHeader,一般在open()后,send()之前

ajax的优缺点

优点:

  1. 无刷新更新数据,不需要刷新整个页面
  2. 异步与服务器通信,不需要打断用户操作
  3. 前后端负载平衡,可以按需取数据,减少带宽负担

** 缺点**

  1. 干掉了back和history功能,对浏览器机制的破坏
    因为浏览器只能记忆历史记录中的静态页面,页面的局部更新无法保存到历史记录中
  2. ajax的安全问题
    ajax暴露了客户端与服务器端的数据逻辑

XMLHttpRequest取得响应

readyState属性

  • 0:请求未初始化,open还没有调用
  • 1:服务器连接已建立,open已经调用了
  • 2:请求已接收,也就是接收到头信息了
  • 3:请求处理中,也就是接收到响应主体了
  • 4:请求已完成,且响应已就绪,也就是响应完成了
    通过监听readyState事件,可以判断连接状态,如下:
    var request = new XMLHttpRequest();
    request.open("GET", "get.php", true);
    request.send();
    request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
    //做一些事情 request.responseText
    }
    }

json

  • 在JavaScript中使用eval方法解析json数据是很危险的,建议使用JSON.parse()方法
  • 推荐的json数据校验工具: JSONLint, 它可以检验json数据的语法错误

跨域

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。
跨域:简单的理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或c.com域名下的对象。

处理跨域的方法:

  1. 使用代理,通过后台获取数据,返回给前端
  2. 使用JSONP实现get请求的跨域访问,注意:只能实现get请求的跨域
  3. XHR2:就是HTML5提供的XMLHttpRequest Level2实现了跨域访问,但是不支持IE10以下的版本

你可能感兴趣的:(ajax学习)