Ajax发送get请求

Ajax发送get请求

简单介绍

Ajax是一门异步的用于发送网络请求的技术。
全称为：Async javascript and XML
UI刷新：通常情况下，每次提交表达的时候，都会刷新界面，而使用ajax发送请求可以实现异步发送请求获取数据而不刷新界面效果。

具体示例：

a.蘑菇街加载数据，页面的内容在不断的加载，但是整个页面并没有刷新。
b.百度搜索框输入关键字，页面内容发生了变化，但是整个页面也没有刷新。
以上都是应用ajax技术来实现的。

具体说明：Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合。

Ajax的优点:
    1）不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
    2）用户体验极佳(不刷新页面即可获取可更新的数据);
    3）提升 Web 程序的性能(在传递数据的时候不必整体提交);
    4）减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);

Ajax 的不足：
    1）不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
    2）前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面);
    3）搜索引擎的支持度不够(搜索引擎爬虫还不能理解 JS引起变化数据的内容);
    4）开发调试工具缺乏

使用Ajax发送网络请求的基本步骤

01 创建异步对象（XMLHTTPRequest），存在兼容性问题
02 请求请求路径（open）
03 发送请求（send）
04 监听请求的状态（onreadystatechange）
05 处理请求结果

onreadystatechange的几种状态：
（1）请求未初始化 - 0
（2）服务器连接已经建立 - 1
（3）请求已经接收 -2
（4）请求处理中 -3
（5）请求已经完成，且响应已经就绪 -4

处理请求结果
（1）当请求完成的时候再进行处理，即readyState == 4
（2）通过响应码判断只有请求成功的时候才进行处理，即响应码>=200,<300或者是=304（缓存）
（3）拿到服务器返回的响应体：response.Text


创建请求对象的兼容性处理：
if（window.XMLHTTPRequest）
{
    var request = new XMLHTTPRequest();
}else
{
    var request = new ActiveXObject("Microsoft","XMLHTTP");
}

使用Ajax发送网络请求代码示例

缓存处理

在IE浏览器中（7），如果发送的是GET请求，那么只要URL没有发生变化，那么IE浏览器就会认为网页的内容也没有发生变化，因此会优先使用缓存数据，所以如果在IE浏览器中想让数据实时更新（获取到最新的数据），那么可以让每次请求的URL都不一样（即每次请求的URL地址不一样）。

在开发中可以使用随机数因子或者是时间戳来添加一个额外的参数给url路径。
（1）获取时间戳：var date = new Date();date.valueOf()
（2）获取随机数因子 Math.radom()

说明：
为url添加随机数或者是时间戳的目的在于让每次请求的时候url的内容都不一样
参数变化唯一的作用就是让每次发送网络请求的时候URL都不相同，以让服务器总是把最新的数据返回。

代码示例

// 数据处理方法
function json2str(data) {
    var arr = [];
    for(var key in data){
        arr.push(key+"="+data[key]);
    }
    // 不能直接将中文提交给服务器, 中文需要编码之后再提交
    return encodeURI(arr.join("&"));
}

// 发送请求方法
function myAjax(url, data,timeout,success, error) {
    // 0.对参数进行处理
    var res = json2str(data);

// 1.创建异步对象
if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置URL
xhr.open("get", url+"?"+res, true);
// 3.发送请求
xhr.send();
// 4.监听状态
xhr.onreadystatechange = function () {
    // 5.处理返回结果
    if(xhr.readyState == 4){
        // 清空定时器
        clearTimeout(timer);
        if(xhr.status >= 200 &&
            xhr.status < 300 ||
            xhr.status == 304){
            success(xhr.responseText);
        }else{
            error(xhr.status);
        }
    }
}
// 6.对超时时间处理
var timer = setTimeout(function () {
    alert("超时了");
    // 中断请求
    xhr.abort();
}, timeout);
}