学习日记:ajax的产生的背景、原理、特点与应用

一、ajax产生的背景

1 ) 传统web应用请求和响应的特点

（1） 请求: 浏览器以http协议的方式提交到服务器
（2）响应: 服务器以http协议的方式响应内容到浏览器
HTTP请求有三个部份组成：请求行，请求头，请求体
HTTP响应有三个部份组成：响应行，响应头，响应体
注意：HTTP是WEB大众化非安全协议
HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加
密等 特殊功能，常用于在线支付，或者是需要安全性较高的网
站中，例如： 12306网站
（3） 状态栏：有明显的刷新现象
（4） 历史栏： 浏览器会收集原来的页面进行缓存
（5） 缺点:再不需要进行大量内容更新的时候也需要刷新整个页面，对服务器的造成负担
（6） 改进： 只对需要更新的地方进行刷新,其余的地方不进行改变

---

二、ajax（异步的js和xml）的原理与特点

1） ajax的原理

（1） 同步：当浏览器提交请求之后需要等待服务器响应之后才能提交下一个请求
请求1→响应1→请求2→响应2→
（2）异步：当浏览器提交请求之后无需等待服务器响应便可以提交下 一个请求
请求1→请求2→响应1→响应2→
web2.0时代
项目中：以web1.0为主，web2.0为辅

（3）什么是ajax？
ajax指的是浏览器在不必进行整个页面刷新的情况下，能与浏览器进行异步通讯，使页面进行局部更新的技术。
ajax不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

（4）不用刷新整个页面便可与服务器通讯的办法有：
（A）Flash/ActionScript
（B）框架Frameset
（C）iFrame（内嵌入框架)
（D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)
背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，
Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，
IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，
也可以使用ActiveXObject对象。
无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建
注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来

function createAJAX(){
    var ajax = null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }catch(e1){
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

（2） ajax的开发步骤

（1） 创建ajax

var ajax = createAJAX();

（2）准备异步发送请求（以什么方式提交和url）

var method = "POST";
var url = "${pageContext.request.contextPath }/#?time=" new Date().getTime();
//加time是因为IE会自动检测url是否提交过，是的话会从缓存中提取而不会和数据库通讯
ajax.open(method,url);

（3）如果是POST方式提交的话，还需要发送ajax请求头（请求头在open和send中间）

    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

（4）发送异步请求

//如果是GET方式提交的话那么是
//ajax.send(null);   因为已经把数据带在url后面了 
//如果是POST方式请求的话
var content = "变量名= " + 数据;
ajax.send(content);
//------------------------等待

（5）ajax不断地监听服务器端响应的状态变化（状态变化有0.1.2.3.4当状态为4的时候表示服务端已经响应）

ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
        //服务器必须是正确的响应状态
        if(ajax.status == 200){
            var text = ajax.responseText;
            //如果服务端是用xml方式返回的话那么是
            // var text = ajax.responseXML;
            //....      
        }
    }
}

ajax常用的事件、方法和属性

（1）事件：
ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，
是由服务器程序触发，不是程序员触发

（2）属性：
ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法
ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法
ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端
ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。
ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信 息，但接收到的数据不一定都正确
上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同
ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常
ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据
ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据
（3）方法：
ajax.open(method,url,可选的boolean值)
AJAX异步对象准备发送异步请求
参数一：以什么方式发送，常用的用GET或POST，大小写不敏感
参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收，
这里只限于JavaEE学科
参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端
如果设置为false，表示AJAX对象以【同步】的方式提交到服务端
ajax.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”)
设置请求头，表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效（POST请求必须写上）
ajax.send(content)
AJAX异步对象真正发送异步请求
参数一：表示HTTP【请求体】中的内容
如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL
如果是POST方式：content != null，例如：username=jack&password=123&role=admin

返回数据的数据载体

（1）HTML
（A）优点：服务端响应的是普通html字符串，无需JS解析，配合innerHTML属性效率高
（B） 缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML
注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代
（C）适合：小量数据载体，且只更新在web页面中的一个地方

（2）XML
（A）优点：是种通用的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分
（B）缺点：XML文件格式相当严格，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下
（C）适合：大量具有层次数据载体

ajax的应用

（1）注册时候用户名的检测
（2）验证码的实时验证
（3）各种平台的点赞、加分、签到功能
……暂时就想到这么多