26@ajax_day01

 

1、ajax是什么?
　　异步的javascript和xml
　　在传统的web应用当中，点击提交按钮，浏览器会在将数据发送给服务器的同时，会将整个页面销毁，然后，等待服务器返回一个新的页面回来，浏览器再次解析。
　　为了解决这种“等待-响应-等待”的弊端，可以使用ajax技术，ajax技术的实质是利用浏览器内置的一个特殊的对象(XmlHttpRequest)异步地向服务器发送请求，在该对象发送请求的同时，浏览器不会销毁之前的页面，也就是说，用户仍然可以对以前的页面进行任何的操作。当服务器处理请求完毕，会将结果(不是一个完整的页面，只是部分数据，一般以文本或者xml文本)返回给XmlHttpRequest对象。然后，可以利用javascript将这些结果数据更新到原有的页面(即使用dom操作)。整个过程，页面无任何的刷新，不打断用户的操作。

---

2、XmlHttpRequest对象

　　1)如何获得该对象
　　　　该对象并没有标准化,要区分浏览器。
　　　　ie浏览器不支持XMLHttpRequest类型，其它浏览器支持。

function getXmlHttpRequest(){
    var xmlHttpRequest = null;
    if ((typeof XMLHttpRequest) != 'undefined') {
        xmlHttpRequest = new XMLHttpRequest();
    }else {
        xmlHttpRequest =
        new ActiveXObject('Microsoft.XMLHttp');
    }
    return xmlHttpRequest;
}

 

 

　　2)属性
　　　　onreadystatechange: 注册监听器(绑订事件处理代码)
　　　　readyState: 与服务器之间通讯的状态,该状态有0,1,2,3,4五个值，当值为4时，表示收到了服务器返回的所有的数据。
　　　　　　0 (未初始化) 对象已建立，但是尚未初始化。(尚未调用open方法)
　　　　　　1 (初始化) 对象已建立，尚未调用send方法。
　　　　　　2 (发送数据) send方法已调用。
　　　　　　3 (数据传送中) 已接收部分数据。
　　　　　　4 (数据接收完毕) 此时，可以调用responseText获取数据。
　　　　　　　　responseText:获取服务器返回的文本数据
　　　　　　　　responseXML:获得服务器返回的xml数据
　　　　　　　　status:获得状态码

---

3、编程

　　step1 获得XmlHttpRequest对象
　　　　var xhr = getXhr();
　　step2 发请求
　　　　1) 发送get请求
　　　　　　//open(请求方式,请求地址,同步还是异步);
　　　　　　//如果有请求参数，应该添加到请求地址后面
　　　　　　// true表示异步，false表示同步         

    xhr.open('get','check_username.do?username=zs',true);
    xhr.onreadystatechange=f1;
    xhr.send(null);

 

 

　　　　2)发送post请求

    xhr.open('post','check_username.do',true);
    //为xhr生成的请求数据包添加一个content-type消息头。
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.onreadystatechange=f1;
    xhr.send("username=zs");

 

 

　　step3 编写服务器端的代码，来处理请求。
　　step4 在监听器(事件处理代码当中)处理服务器返回的数据。

function f1(){
    //只有状态等于4
    if(xhr.readyState == 4){
        //获得服务器返回的数据
        var txt = xhr.responseText;
        //var xml = xhr.responseXML;
        //dom操作
            ...
    }
}

 

 

 

---

练习：
　　使用ajax方式对验证码进行验证。

---

4、ajax编程需要注意的两个问题

　　1)缓存问题
　　　　当采用get方式向服务器发请求时，ie浏览器会先查询缓存当中有没有结果，如果有，则不会向服务器发请求。
　　　　解决方案：
　　　　　　a, 在请求地址后面添加一个随机数
　　　　　　b, 或者使用post方式
　　2)编码问题
　　　　a, 链接地址当中有中文
　　　　　　浏览器(不管什么浏览器)一定会使用utf-8对链接地址中的中文进行编码。
　　　　　　解决方式：
　　　　　　　　对于tomcat, tomcat_home/conf/server.xml，添加 URLEncoding="utf-8",
　　　　　　　　重新启动服务器。
　　　　b,链接地址中包含了中文参数
　　　　　　浏览器会对链接地址中的中文参数进行编码，会使用打开链接所在的页面的编码格式来编码。
　　　　　　解决方式一:
　　　　　　　　step1 对于tomcat, tomcat_home/conf/server.xml，添加 URLEncoding="utf-8",重新启动服务器。
　　　　　　　　step2 要保证链接所在的页面以"utf-8"的编码格式打开。
　　　　　　解决方式二:
　　　　　　　　step1 对于tomcat, tomcat_home/conf/server.xml，添加 URLEncoding="utf-8",重新启动服务器。
　　　　　　　　step2 对链接地址中的中文参数使用URLEncoder.encode(参数,"utf-8");
　　　　c,ajax编程当中如何向服务器发送中文参数
　　　　　　在ajax应用当中，不是浏览器向服务器发请求，是XMLHttpRequest对象向服务器发请求，该对象也会对请求中的中文参数进行编码。
　　　　　　当使用get方式时，ie浏览器内置的XMLHttpRequest对象(其实是ActiveXObject)会采用gbk编码，而其它浏览器，采用utf-8编码。
　　　　　　解决方式：
　　　　　　　　step1 对于tomcat, tomcat_home/conf/server.xml，添加 URLEncoding="utf-8",重新启动服务器。
　　　　　　　　step2 使用encodeURI函数(javascript内置的一个函数)对中文进行编码。
　　　　　　当使用post方式发请求时，浏览器(所有浏览器)会对中文参数统一进行utf-8编码。
　　　　　　解决方式：
                   　　 request.setCharacterEncoding("utf-8");
             

---

练习：

　　使用ajax方式实现一个级联下拉列表