Ajax的简单介绍和使用方法

一、什么是Ajax

---

Ajax 的全称是 Asynchronous JavaScript and XML（即异步的 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

 

ajax的作用：从服务器读取数据

应用：局部刷新：请求并显示部分网页内容

实际的操作：读取数据，写入页面；  即：ajax+DOM

怎么使用：

1. 使用写好的ajax库，
2. 调用ajax方法，
3. 获取异步调用返回的数据
4. 使用 JavaScript 和 DOM 实现局部刷新

 

 

 

二、Ajax的优缺点

---

1、优点：

• 通过异步模式，提升了用户体验
• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
• Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

 

2、缺点

• 不支持浏览器back按钮
• 安全问题，Ajax 暴露了与服务器交互的细节
• 对搜索引擎的支持比较弱

 

 

三、Ajax 的使用 -- 实现步骤

---

创建ajax对象

连接服务器

发送请求

接收返回

 

1、创建ajax对象（创建 XMLHttpRequest 对象，即创建一个异步调用对象）

var oAjax =null
if(window.XMLHttpRequest){
    oAjax= new XMLHttpRequest();     //IE7+, Firefox, Chrome, Opera, Safari...
}else{
    oAjax= new ActiveXObject("Microsoft.XMLHTTP");   //IE6,IE5
}

这里+ window. 的原因：使用一个不存在的变量，浏览器会报错；使用一个不存在的属性，只会显示undefined

IE6-浏览器没有XMLHttpRequest变量，所以使它变成window的属性，可以防止浏览器报错

 

2、连接服务器

oAjax.open(method,url,async);

// method：请求类型，GET 或 POST---------可选
// url：文件在服务器上的位置--------------必要参数
// async：是否异步，true（异步）或 false（同步）----可选
// 以上参数使用时均要加上“”

 

3、发送请求

oAjax.send()

 

4、接收返回 

oAjax.onreadystatechange = function (){       //oAjax.onreadystatechange事件： 当Ajax与服务器通信发生，状态变化时，调用
    if (oAjax.readyState == 4){               //判断请求状态； 4：响应内容解析完成，可以在客户端调用了
        if(oAjax.status ==200){               //判断请求结果； 200：请求成功处理并返回
            alert("成功" +oAjax.responseText);   //oAjax.responseText: 服务器返回的数据
        }else{
            alert('失败');
        }
    }
 }

 

 

定义一个Ajax库，整体代码,以及使用方式：

function ajax(url, fnSucc, fnFaild){
    var oAjax =null
    if(window.XMLHttpRequest){
        oAjax= new XMLHttpRequest();     //IE7+, Firefox, Chrome, Opera, Safari...
    }else{
        oAjax= new ActiveXObject("Microsoft.XMLHTTP");   //IE6,IE5
    }

    oAjax.open('GET', url, true);

    oAjax.send();

    oAjax.onreadystatechange = function (){
        if (oAjax.readyState == 4){               
            if(oAjax.status ==200){              
                fnSucc(oAjax.responseText)    //调用成功的异步函数
            }else{
                if(fnFaild){                 
                    fnFaild()                  //如果失败并注册了失败的异步函数，则调用
                }
            }
        }
     }
}

 使用Ajax，首先引入Ajax库，再调用

<script src ='aAjax库的文件名.js'></script>

<script>
    ajax('请求的文件地址', function(str){
       ..   // eg: alert(str);
    },function(){
       ..   // eg: alert('失败了');
    });
</script>

 

注：

ajax从服务器读取的所有内容以文本形式返回。（字符串

因此引出eval()

• 这个方法接收一个字符串，字符串中可以是任何js代码，
• 这个函数的作用是执行字符串内的js代码

//data.json
[{a:12, b:5}, {a:8, b:9}]

ajax('data.json' , function(str){
    // str -> '[{a:12, b:5}, {a:8, b:9}]'      str是一个字符串
    var arr = eval(str);                  //   arr -> [{a:12, b:5}, {a:8, b:9}]  是一个数组
    alert(arr[0].a); 
})

 

 

 

总结：

• 创建Ajax对象
  • ActiveXObject("Microsoft.XMLHTTP") —— IE下特有的控件
  • XMLHttpRequest() —— 判断的时候+window
• 连接服务器
  • open(方法，文件名，异步传输)
    • 同步和异步
• 发送请求
  • send()
• 请求状态监控
  • onreadystatechange事件，  每当 readyState 属性改变时，就会调用该函数
    • readyState属性：请求状态，  存有 XMLHttpRequest 的状态
      • 0（未初始化）还没有调用open()方法
      • 1（载入）已调用send() 方法，正在发送请求
      • 2（载入完成）send()方法完成，已收到全部响应内容
      • 3（解析）正在解析响应内容
      • 4 （完成）响应内容解析完成，可以在客户端调用了
    • status属性：表示响应状态码。比较常见的有：
      • 200：“OK”（当 readyState 等于 4 且状态为 200 时，表示响应已就绪）
      • 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）
      • 403：（禁止） 服务器拒绝请求
      • 404：（未找到） 服务器找不到请求的网页
      • 408：（请求超时） 服务器等候请求时发生超时
      • 500：（服务器内部错误） 服务器遇到错误，无法完成请求
    • responseText ：获得字符串形式的响应数据  （服务器响应处理）
    • responseXML：获得XML 形式的响应数据   （服务器响应处理）

 

 

 

参考：Ajax 的简介与使用