Ajax 学习笔记

来源：互联网发布：西部世界什么意思知乎编辑：程序博客网时间：2024/06/01 10:33

1、ajax是（asychronous javascript and xml，异步的javascript和xml）的缩写，是一种用来改善用户体验的技术，其实质是利用浏览器提供的一个特殊对象（XMLHttpRequest）异步地向服务器发送请求。服务器返回部分数据，浏览器利用这些数据对当前页面做部分更新。整个过程，页面无刷新，不打断用户的操作。异步指的是，当这个对象向服务器发送请求的时候，浏览器不会销毁当前页面，用户仍然可以对当前页面做其他操作。如检验“用户名被占用”场景。

2、获取ajax对象

因为ajax对象并没有标准化，所以要区分浏览器。

function getXmlHttpRequest(){

var xhr = null;

if(window.XMLHttpRequest){ //非IE浏览器

xhr = new XMLHttpRequest();

}else{ //IE浏览器

xhr = new ActiveXObject('Microsoft.XMLHttp');

}

return xhr;

}

3、ajax对象的重要属性

（1）onreadystatechange：用来绑定一个事件处理函数，该函数用来处理readystatechange事件。当ajax对象的readystate属性发生了任何的改变（比如，从0变成了1），就会触发readystatechange事件。

（2）readyState：有5个值（0，1，2，3，4），用于获取ajax对象与服务器进行通信的状态。其中，4表示ajax对象已经获取了服务器返回的所有数据。

（3）responseText：获取服务器返回的文本。

（4）responseXML：获取服务器返回的XML。

（5）status：获取服务器返回的状态码。

4、编程步骤

step1. 获得ajax对象；

var xhr = getXmlHttpRequest();

step2. 利用ajax对象发送请求；

方式一：发送get请求；

a. xhr.open('get', 'check_uname.do?username=Sally&age=22', true);

ps. param1：请求方式；param2：请求地址；param3：true表示让ajax对象发送异步请求，false表示发送同步请求，浏览器不会销毁当前页面，但是会锁定当前页面，用户不能对当前页面做其他操作。

b. xhr.onreadystatechange=handler;绑定好事件处理函数。

c. xhr.send(null); ajax对象把相关数据打包发送给服务器。

方式二：发送post请求；

a. xhr.open('post','check_uname.do',true);

b. xhr.setRequestHeader('content-type','');

c. xhr.onreadystatechange=handler;

d. xhr.send('username=Sally');

ps. 按照http协议的要求，如果发送的是post请求，应该包含有一个消息头（content-type），默认情况下，ajax对象不会发送该消息头，所以，需要调用setRequestHeader方法来添加。

step3. 写服务器端的程序。一般只需要返回部分数据，不再是一个完整的页面。

step4. 写事件处理函数（handler），该函数处理服务器返回的数据，对当前页面做部分更新。

if(xhr.readyState == 4 && xhr.status == 200){

var txt = xhr.responseText;

部分更新...

}

5、编码问题

（1）发送get请求

a. 乱码产生的原因：如果是IE浏览器，会使用GBK字符集对中文参数值进行编码，其他浏览器会使用“utf-8”字符集。服务器端默认会使用ISO-8859-1来解码。

b. 解决方式：

step1. 设置服务器参数，让服务器统一使用“utf-8”来解码。conf/server.xml-->URIEncoding="utf-8"

step2. 让客户端统一编码。可以使用encodeURI函数对请求参数值进行统一的编码，该函数是js内置的一个函数。

（2）发送post请求

a. 乱码产生的原因：浏览器会使用"utf-8"来编码，服务器端默认会使用"iso-8859-1"来解码。

b. 解决方式：getParameter方法前面加入：request.setCharacterEncoding("utf-8");

6、JSON

JSON是（javascript object notation，JS对象声明）的缩写，是一种轻量级的数据交换格式（轻量级相对于XML而言，XML文档大且解析速度慢，JSON文档更小，解析速度更快）。数据交换指的是将数据转换成一种与平台无关的数据格式，然后转交给接收方来处理。

JSON语法

（1）表示一个对象。

{属性名：属性值，属性名：属性值...}

a. 属性名必须使用双引号括起来；

b. 属性值可以是number，string，true/false，null，object五种数据类型；

c. 属性值如果是string，必须使用双引号括起来。

（2）表示由对象组成的数组。

[{},{}...]，其中{}表示一个对象，[]表示由对象组成的数组。

使用JSON做数据交换

（1）java对象转换成JSON字符串：利用json官方的工具（json-lib.jar）中的JSONObject和JSONArray类，JSONObject可以把单个对象转换成JSON字符串，JSONArray可以把多个对象组成的数组或List转换成JSON字符串。

（2）JSON字符串转换成javascript对象：利用一些javascript框架（prototype.js中的evalJSON()），js内置的函数eval()也可以转换，但经常有一些安全问题，所以少用。

编程步骤：

step1. 建表；

step2. 实体类；

step3. DAO；List<> findAll(int num);

step4. Servlet，调用DAO，将查询到的数据转换成JSON字符串；

step5. JSP。

7、网景公司发明了javascript语言，微软发明了jscript语言。

ECMA组织制定了ECMAScript标准，规定了语法、数据类型、函数；

W3C组织制定了DOM标准/规范，做网页解析；

还存在BOM规范，其中有window，location，history...对象。

8、jQuery对Ajax的支持

（1）load方法：

<1>作用：向服务器发送异步请求，并且将服务器返回的数据直接添加到符合要求的节点之上（obj.innerHTML = 服务器返回的数据）。

<2>用法：$obj.load(uri, [data]);

uri：是一个字符串，用来设置请求地址，比如$obj.load('getPrice.do');

data：用来设置请求参数，可以是一个请求字符串的形式，比如'username=zs&age=22'，也可以是一个对象，比如{'username':'zs', 'age':22}。如果请求参数使用第一种格式来发送，则load方法会使用get方式来提交，这是默认方式；如果请求参数使用第二种方式来发送，则load方法会使用post方式来提交。

（2）$.get和$.post方法：

<1>作用：向服务器发送异步请求，并且可以对服务器返回的数据进行处理。$.get底层发送get请求，而$.post底层发送post请求，用法完全一样。

<2>用法：$.get(uri, [data], [callback], [type]);

uri：是一个字符串，用来设置请求地址；

data：可以是字符串或对象，用来设置请求参数，两种方式都是用get方式来提交；

callback：回调函数，用来处理服务器返回的数据，不会立即执行，等事件产生之后才会执行；该函数格式如下：

function(obj)，obj是服务器返回的数据，或处理结果；

type：服务器返回的数据的类型，html文档，text文本，json字符串，xml文档，script脚本；

（3）缓存问题

<1>IE浏览器在发送get请求时，会查看请求地址是否访问过，如果访问过，则不再发送新的请求，而是直接使用之前缓存的结果。

<2>解决方法：

方式一：在请求地址后面添加一个随机数：$.get('quoto.do?'+Math.random(),function(){});