AJAX(用法总结-精华版)

AJAX(用法总结-精华版)
AJAX(用法总结-精华版)

1、ajax是什么?

ajax: asynchronous javascript and xml: 异步的javascript和xml。

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

使用ajax技术之后,页面无刷新,并且不打断用户的操作。

2、ajax对象

(1)如何获得ajax对象?

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

function getXhr()

{

var xhr;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest(); // 非ie浏览器}else{

xhr = new ActiveXObject('Microsoft.XMLHttp'); // ie浏览器}

}

(2)ajax对象的属性

a. 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: (响应结束) --> 接收了所有的数据

(3)ajax编程的基本步骤

1) 获取ajax对象(XmlHttpRequest)

2)使用 XmlHttpRequest向服务器发送请求

3)在服务器端处理请求

4)在监听器当中,处理服务器返回的响应

1) 获取ajax对象(XmlHttpRequest)

var xhr = getXhr();

2) 发送请求

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 方法。

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

4) 编写监听器

function f1(){

if(xhr.readyState == 4){

//获得服务器返回的数据

var txt = xhr.responseText;

//dom操作

}

}