孙肖宁

Ajax的基本概念
Asynchronous Javascript And XML(异步JavaScript和XML),他并不是凭空出...
扫描右侧二维码阅读全文
17
2018/07

Ajax的基本概念

Asynchronous Javascript And XML(异步JavaScript和XML),他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest。
Ajax的使用一共分为5步
1.建立XMLHTTPRequest对象
2.注册回调函数

  • 当服务器回应我们了,我们想要执行什么逻辑

3.使用open方法设置和服务器端交互的基本信息,即:设置提交的网址,数据,post提交的一些额外内容
设置发送的数据,开始和服务器端交互
4.发送数据
5.处理响应,在注册的回调函数中,获取返回的数据,处理返回回来的数据。

示例代码:GET

get的数据,直接在请求的url中添加即可

<script type="text/javascript">
    // 创建XMLHttpRequest 对象
    var xml = new XMLHttpRequest();
    // 设置跟服务端交互的信息
    xml.open('get','01.ajax.php?name=fox');
    xml.send(null);    // get请求这里写null即可
    // 接收服务器反馈
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 打印响应内容
            alert(xml.responseText);
        } 
    };
</script>

示例代码:POST

<script type="text/javascript">
    // 异步对象
    var xhr = new XMLHttpRequest();
    // 设置属性
    xhr.open('post', '02.post.php' );
    // 如果想要使用post提交数据,必须添加
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 将数据通过send方法传递
    xhr.send('name=fox&age=18');
    // 发送并接受返回值
    xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
           alert(xhr.responseText);
        } 
    };
</script>

注意:
1.创建XMLHttpRequest对象(兼容性写法)
新版本浏览器:var xml=new XMLHttpRequest();
(IE5 和 IE6):var xml=new ActiveXObject("Microsoft.XMLHTTP");
考虑兼容性创建Ajax对象

 var request ;
 if(XMLHttpRequest){
    // 新式浏览器写法
    request = new XMLHttpRequest();
 }else{
    //IE5,IE6写法
    new ActiveXObject("Microsoft.XMLHTTP");
 }

2.发送请求:

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GETPOSTurl:文件在服务器上的位置async:true(异步)或 false(同步)
send(string)将请求发送到服务器。string:仅用于 POST 请求

3.onreadystatechange事件

当服务器给予我们反馈时,我们需要实现一些逻辑

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。(0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪。)
status200: "OK"。404: 未找到页面

附录:封装的方法:

function ajax(option) {
  // 创建对象
  var xmlRequest ;
  if (XMLHttpRequest) {
      xmlRequest = new XMLHttpRequest();
  }else{
      xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

  }

  // 格式化传入的数据为name=fox&age=18这样的格式
  var formatStr = "";
  for(var item in option.data){
      // 获取属性名,属性值,进行拼接
      formatStr+=item;// 属性名
      formatStr+="=";//等号
      formatStr+=option.data[item];//属性值
      formatStr+="&";//分隔符
  }

  // 去除最后一个&
  formatStr = formatStr.slice(0,-1);

  // open方法 如果是get方法,那么url之后需要添加数据
  if(option.method == "get"){
      option.url = option.url+"?"+formatStr;
      option.data = null;
  }
  // 调用open方法
  xmlRequest.open(option.method,option.url)

  // 如果是post设置HTTP协议头
  if (option.method=="post") {
      xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  }

  // send方法 这里的data已经是修改过的,如果使用的是get方法,那么data为null
      xmlRequest.send(option.data);

  // 判断状态改变,调用方法
  xmlRequest.onreadystatechange = function () {
  // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
             option.success(这里的数据是ajax获取的);  
     } 
  };
}
Last modification:July 17th, 2018 at 11:24 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment