Ajax

Ajax介绍:

• 1. Asynchronous JavaScript and XML(异步的 JavaScript 和 XML);
• 2. Ajax技术能够向服务器请求额外的数据而无需卸载页面
• 3. Ajax技术核心是XMLHttpRequest对象
• 4. 检测XHR对象的readyState属性, 该属性表示请求/响应过程的当前活动阶段.这个属性可以取值:
     • 0: 未初始化.尚未调用open()方法
     • 1: 启动. 已经调用open()方法, 但尚未调用send()方法
     • 2: 发送. 已经调用send()方法, 但尚未接受响应
     • 3: 接受. 已经接受到部分响应数据
     • 4: 完成. 已经接受到全部响应数据, 而且已经可以在客户端使用了
• 5. 请求方式
     GET请求是最常见的请求类型, 最常用于向服务器查询信息.
     POST通常用于向服务器发送应该被保存的数据

使用ajax请求数据的过程

• Ajax : 发送异步请求,更新页面局部内容

  • 创建对象 new XMLHttpRequest() ; //考虑兼容性

   var xhr = null;
   if(window.XMLHttpRequest) { //主流浏览器 (包括IE7、以后的版本)
       xhr = new XMLHttpRequest();
    }else { //IE6、 IE5
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
  

  • 建立链接 open()
  • send() 携带请求数据
  • 处理的服务返回的数据
    1>.readystate : 0 , 1 , 2 , 3 , 4
    2>.status == 200 表示服务器返回数据成功
    3>.onreadystatechange 状态码发生 改变 实时调用方法

• jquery 中 的ajax

   $.ajax({
        url : ' ', //请求地址
        type: ' ', // 请求方式(get; post)
        dataType : ' ', // 返回值类型(json; XML)
        data :{}, // 请求参数
        success: function(value) { // 成功的会调函数
            console.log(value);
        },
        error: function(err) { // 失败的回调函数
            console.log(err);
        }
   });
  

跨域问题

1.跨域
协议,子域名,主域名,端口 有一个不同 说明跨域 不同源
ajax会出现跨域的原因 : js安全因素,禁止跨域(同源策略)

2.解决跨域的问题
1>.代理 (依靠服务器处理)
2>.jsonp
3>.html5