ajax基础

概念

asynchronous javascript and xml: 异步的javascript和xml。
ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后，页面无刷新，并且不打断用户的操作。

使用

如何获得ajax对象?

XMLHttpRequest并没有标准化，要区分浏览器:

function getXhr(){
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();						   // 非ie浏览器
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');   // ie浏览器
    }
}

ajax对象的属性

onreadystatechange: 绑定一个事件处理函数(即: 注册一个监听器)当ajax对象的readyState值发生了改变(比如，从0–>1)，就会产生readystatechange事件。
b. responseText: 获得服务器返回的文本
c. responseXML: 获得服务器返回的XML dom对象
d. status: 获得状态码
e. readyState: 返回ajax对象与服务器通讯的状态。返回值是一个number类型的值，不同的值表示不同的含义:
0: (为初始化) –> 对象已建立，但是尚未初始化(尚未调用 open方法)
1: (初始化) –> 对象已建立，尚未调用send方法
2: (发送数据) –> send方法已调用
3: (数据传送中) –> 已接受部分数据
4: (响应结束) –> 接收了所有的数据

ajax编程的基本步骤

获取ajax对象(XmlHttpRequest)

1	var xhr = getXhr();

使用 XmlHttpRequest向服务器发送请求
xhr.open(请求方式, 请求地址, 异步还是同步);
请求方式: get/post
请求地址:如果是get请求，请求参数要添加到请求地址的后面。
true表示异步请求: ajax对象发请求的同时，用户可以对当前
页面做其它的操作。一般常用异步。
false表示同步请求:ajax对象发请求的同时,浏览器会锁订当前页面，用户需要等待处理完成之后才能做下一步操作。

方式一: get请求
var xhr = getXhr();
xhr.open('get', 'check_name.action?name=zs', true);
xhr.onreadystatechange=f1;
xhr.send(null);

方式二: post请求
var xhr = getXhr();
xhr.open('post', 'check_username.action', true);
// 如果发送的是 post请求，需要设置消息头的编码格式为 “application”
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=' + $F('username'));

注意:因为按照http协议的要求，如果发送的post请求，请求数据包里面，应该有一个消息头 content-type。但是，ajax对象默认没有，所以，需要调用setRequestHeader方法。

编写服务器端的代码，服务器端一般不需要返回完整的页面，只需要返回部分的数据，比如一个简单的字符串

编写监听器,在监听器当中，处理服务器返回的响应

function f1(){
    if(xhr.readyState == 4){
        //获得服务器返回的数据
        var txt = xhr.responseText;
        //dom操作
    }
}

function $(id){
    return document.getElementById(id);
}

function $F(id)	{
    return document.getElementById(id).value;
}

function getXhr(){ // 获取 XMLHttpRequest
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();						   // 非ie浏览器
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');   // ie浏览器
    }
}

GET方式:

function check_name(){
    // 第一步: 获得 ajax对象
    var xhr = getXhr();

    // 第二步: 发送请求
    xhr.open('get', 'check_name.action?name=' + $F('uname'), true);

    // 第三步: ajax函数: 注册一个事件监听器
    xhr.onreadystatechange = function(){ //此函数为 匿名函数，内部函数
        // 只有ajax对象的readyState值为4时，才能获得服务器返回的数据
        if(xhr.readyState == 4){
            // 获得服务器返回的文本数据
            var txt = xhr.responseText;

            // 更新页面
            ${'name_msg'}.innerHTML = txt;
        }
    }
    $('name_msg').innerHTML = '正在验证....';
    
    // 第四步: 发送请求
    xhr.send(null);		
}

POST方式:

function check_name(){
    // 第一步: 获得 ajax对象
    var xhr = getXhr();

    // 第二步: 发送请求
    xhr.open('post', 'check_name.action', true);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

    // 第三步: ajax函数
    xhr.onreadystatechange = function(){//此函数为 匿名函数，内部函数
    
        // 只有ajax对象的readyState值为4时，才能获得服务器返回的数据
        if(xhr.readyState == 4){
            // 获得服务器返回的文本数据
            var txt = xhr.responseText;

            // 更新页面
            ${'name_msg'}.innerHTML = txt;
        }
    }

    $('name_msg').innerHTML = '正在验证....';

    // 第四步: 发送请求
    xhr.send('username=' + $F('uname'));
}

用GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
(1) 无法使用缓存文件（更新服务器上的文件或数据库）
(2) 向服务器发送大量数据（POST 没有数据量限制）
(3) 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

get方式提交的话表单的内容会拼到地址栏的等号后面显性的提交或者获取数据时长度有限制的传递速度快后台处理方式不一样

post 方式不会隐性的提交或者获取数据时长度无限制的传递速度慢些后台处理方式不一样获取一篇小说长度很大用 post 获取的数据需要隐藏时不想让人看见

问题

编码问题

发送get请求:

ie浏览器内置的ajax对象，对中文参数使用gbk编码，而其它浏览器(firefox,chrome)使用utf8编码。服务器端默认使用iso-8859-1去解码。

解决方案: 对于tomcat，可修改conf/server.xml(添加URIEncoding=”UTF-8”),即: 告诉服务器，对于所有的get请求，使用utf-8进行编码/解码

查询参数有特殊符号或者中文时出现乱码

解决方案: 使用 encodeURIComponent() 进行手动转义

发送post请求

当数据中存在加号(+)、连接符(&)或者百分号(%)时，服务器端接收数据时会丢失数据。

分析Ajax传送数据的格式与Javascript的语法：

“+”号：JavaScript解析为字符串连接符，所以服务器端接收数据时”+”会丢失变空格。
“&”号：JavaScript解析为变量连接符，所以服务器端接收数据时&符号以后的数据都会丢失变空格。

解决方法是通过正则表达式进行编码替换(假设postStr是你想通过ajax传送的数据字符串)
postStr = postStr.replace(/%/g, “%25”);
postStr = postStr.replace(/&/g, “%26”);
postStr = postStr.replace(/+/g, “%2B”);

缓存问题:

当使用IE浏览器时，如果使用get方式发请求，浏览器会将数据缓存起来。
这样，当再此发送请求时，如果请求地址不变，IE浏览器不会真正地向服务器发送请求，而是将之前缓存的数据显示给用户。
解决方式1: 使用post方式发请求。
解决方式2: 在请求地址后面添加一个随机数或者时间戳