聊一聊 ajax

聊一聊 ajax

一.概念

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术(局部刷新)

AJAX => Asynchronous Javascript And XML

直译为:异步的JavaScript和XML

比较直白的讲,AJAX就是JS通过一个网址去加载数据,这个过程通常是用户不可见的,传统的网页(不使用AJAX),如果需要更新内容,必须重新加载整个网页

异步：非阻塞，当前程序的执行和前面程序是否执行完毕没有关系。

同步：阻塞，当前程序必须等前面的程序执行完毕以后，才能运行。

在程序中,同步和异步的区别就是在于代码的执行顺序.同步代码按照顺序运行,异步代码不按照顺序运行.

二.ajax使用

1.优点

(1) 页面无刷新更新数据:AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据;

(2) 异步与服务器通信:AJAX使用异步方式与服务器通信,不需要打断用户操作,具有更加迅速的响应能力

(3) 前端和后端负载平衡:AJAX可以把一起一些服务端负担的工作转嫁到客户端,减轻服务器和带宽的负担,节约空间和宽带租用成本

(4) 基于标准被广泛支持:AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件

(5) 界面与应用分离:AJAX使Web中的数据与呈现分离,有利于分工合作,提高效率

2.缺点

(1) AJAX无Back和History功能:即对浏览器机制的破坏,在动态更新页面的情况下,用户无法回到前一个页面的状态

(2)AJAX有安全问题:AJAX技术给用户带来很好的用户体验的同时也带来了新的安全威胁,AJAX技术就如同对企业数据建立了一个直接通道

(3) 对搜索引擎支持比较薄弱,对搜索引擎优化不太友好

(4) 破坏程序的异常处理机制:像Ajax.dll,Ajaxpro.dll这些AJAX框架是会破坏程序的异常机制

(4) AJAX不能很好支持移动设备:一些手持设备如手机,PDA

3.使用(ajax五步曲)

AJAX的核心对象就是:XMLHttpRequest

XMLHttpRequest可以与服务器交互数据

主流的W3C标准浏览器都支持XMLHttpRequest对象,低版本的IE浏览器(IE5,IE6)使用ActiveXObject

1.创建ajax对象

异步调用对象就是指XMLHttpRequest对象。var xmlhttp = new XMLHttpRequest(); (有IE兼容)

 var xmlhttp;
 // IE兼容性写法为：
 if(window.XMLHttpRequest){// 非IE5 IE6
     xmlhttp = new XMLHttpRequest();
 }
 else{
     // IE5 IE6
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

2.连接服务器:设置请求行 open方法

xhr.open(method,url,async);

第一个参数method:请求方式(get和post)
第二个参数url请求的url
第三个参数async:是否异步(true异步false同步)

xmlhttp.open("get", "url", true);

3.设置请求头

get方式不需要(Content-Type:application/x-www-form-urlencoded)

post请求时，需要在send()之前设置http请求头：作用是模拟表单post来传递参数

 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.设置请求体,发送请求

xhr.send(param);

param：对于get请求，参数为空或null如：xhr.send(null);
param：对于post请求，参数为发送到服务器的数据如：xhr.send(‘name=xiaoming&age=24’);

5.等待数据响应,响应后处理数据

xmlhttp.onreadystatechange = function () {
    //一个成功的响应有2个条件:1服务器成功响应了2异步对象响应状态为4
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //处理数据
        alert(xmlhttp.responseText)
        
    }
}

readyState属性存有XMLHttpRequest对象的状态,当readyState改变时就会触发 onreadystatechange事件

readyState会从0到4发生变化

(1) 0: (初始化)没有调用open方法的时候
(2) 1:(载入)已经调用send方法,发送请求
(3) 2:(载入)send方法已经发送完毕,接收到了所有响应
(4) 3:(解析)正在解析响应的内容
(5) 4:(完成)内容解析完成,可以调用了

status: http请求的状态码,状态码代表着http请求是成功还是失败等信息

常用状态码:

• 200：请求成功

• 301：网页被重定向到其它URL

• 304：文件未被修改，使用缓存资源

• 404：找不到此网页（指定的资源）

• 500：服务器内部错误

responseText: 响应文本，以字符串的形式返回我们请求的数据。

responseXML 获得 XML 形式的响应数据

// 原生js五部曲
//    1.创建ajax对象  异步调用对象就是指XMLHttpRequest对象。var xmlhttp = new XMLHttpReque
        
var xmlhttp;
// IE兼容性写法为：
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//    2.设置请求行 open方法
//    第一个参数:请求方式(get和post)
//    第二个参数请求的url
//    第三个参数:是否异步(true异步false同步)
xmlhttp.open("get", "url", true);
//    3.设置请求头,get方式不需要(Content-Type:application/x-www-form-urlencoded)
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//    4.设置请求体 浏览器向服务器发送请求
xmlhttp.send();
//    5.等待数据响应,响应后处理数据
xmlhttp.onreadystatechange = function () {
    //一个成功的响应有2个条件:1服务器成功响应了2异步对象响应状态为4
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //处理数据
    }
}
/* onreadystatechange详解
   xmlhttp.readyState值发生变化,会触发onreadystatechange详解事件
   0: (初始化)没有调用open方法的时候
   1:(载入)已经调用send方法,发送请求
   2:(载入)send方法已经发送完毕,接收到了所有响应
   3:(解析)正在解析响应的内容
   4:(完成)内容解析完成,可以调用了
*/
//responseText  响应文本，以字符串的形式返回我们请求的数据。
// 状态码:200 OK  403 没有权限  404  找不到路径  500 服务器内部错误 400语法错误

三.封装一个ajax

function $ajax(options) {
    options = options || {};//若没有指定options,则赋值空对象{}
    options.type = (options.type || "GET").toUpperCase();//设置请求格式,get和post,默认为Get
    options.dataType = options.dataType || "json";//响应的数据格式,默认为json

    var params = formatParams(options.data);//对请求的数据封装
    //1.创建XMLHttpRequest对象
    // var xmlhttp = window.XMLHttpRequest || new ActiveXObject("Microsoft.XMLHTTP");
    var xmlhttp;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (error) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

    //2 设置请求行
    if (options.type == "GET") {
        xmlhttp.open("GET", options.url + "?" + params, true);
        xmlhttp.send();
    }
    else if (options.type == "POST") {
        xmlhttp.open("POST", options.url, true);
        // 3.设置请求头
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //4.发送请求
        xmlhttp.send(params);
    }

    // 5.接收响应数据 触发会触发onreadystatechange事件
    xmlhttp.onreadystatechange = function () {
        //内容解析完成
        if (xmlhttp.readyState == 4) {
            var status = xmlhttp.status;
            if (status >= 200 && status < 300 || status == 304) {
                options.success && options.success(xmlhttp.responseText, xmlhttp.responseXML);
            }
            else {
                options.error && options.error(status);
            }
        }
    }
}

function formatParams(data) {
    var arr = [];
    for (var item in data) {
        //使用encodeURIComponent 对非标准的字符进行编码
        arr.push(encodeURIComponent(item) + "=" + encodeURIComponent(data[item]));
    }
    //使用随机数,确保每次请求的参数为最新的
    arr.push(("v=" + Math.random()).replace(".", ""));
    return arr.join("&");
}