目录

一、Ajax概述1

1.1什么是Ajax1

1.2Ajax对象：如何获得Ajax对象1

1.3Ajax对象的属性2

1.4编程步骤2

1.5编码问题3

1.6Ajax的优点3

1.7缓存问题（IE浏览器）4

1.8案例：简易注册（使用Ajax进行相关验证，get请求）4

1.9案例：修改1.8案例，使用post请求6

1.10案例：使用Ajax实现下拉列表6

二、JSON 7

2.1什么是JSON7

2.2数据交换7

2.3轻量级7

2.4JSON语法（www.json.org）7

2.5如何使用JSON来编写Ajax应用程序8

2.6案例：股票的实时行情9

2.7案例：显示热卖的前3个商品10

2.8同步请求10

2.9案例：修改1.8案例step1中的JS代码（使用同步请求）11

一、Ajax概述

1.1什么是Ajax

AsynchronousJavascriptAndXml（异步的JavaScript和Xml）。是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequest，一般称之为Ajax对象）异步地（Ajax对象在向服务器发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向服务器发送请求，服务器送回部分数据（不是一个完整的新的页面，而是文本或者Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。

之前，都是先销毁原来的页面，然后发送请求，等待服务器发送响应，再生成新页面。

Ajax的工作流程：

1.2Ajax对象：如何获得Ajax对象

由于XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。

functiongetXhr(){//注意：后面的案例都将用到此函数

varxhr=null;

if(window.XMLHttpRequest){

xhr=newXMLHttpRequest();//非IE浏览器

}else{

xhr=newActiveXObject('Microsoft.XMLHttp');//IE浏览器

}

returnxhr;

}

u注意事项：后面的案例也会用到以下函数

function$(id){//依据id返回dom节点

returndocument.getElementById(id);

function$F(id){//返回id对应的值

return$(id).value;

}

1.3Ajax对象的属性

1）onreadystatechange：绑定一个事件处理函数（监听器），该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变，比如从0到1，则会产生onreadystatechange事件。

2）responseText：获得服务器返回的文本数据。

3）responseXML：获得服务器返回的Xml文档。

4）status：获得状态码。

5）readyState：返回Ajax对象与服务器通讯的状态，返回值是一个number类型的值。一共有5个值，分别是：

①0：（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）。

②1：（初始化）对象已建立，尚未调用send方法。

③2：（发送数据）send方法已调用。

④3：（数据传送中）已接收部分数据。

⑤4：（响应结束）Ajax对象已经获得了服务器返回的所有的数据。

1.4编程步骤

1）发送get请求：

step1：获得Ajax对象，比如：varxhr=getXhr();//调用之前定义的函数

step2：使用Ajax对象发送get请求

①调用xhr.open('get',check_username.do?username=chang&age=23,true);方法：建立与服务器之间的连接，三个参数依次为：请求方式、请求资源路径、请求是同步还是异步。

true：表示异步请求（Ajax对象发送请求时，用户可以对当前页面作其他的操作，不会销毁页面）。

false：表示同步请求（Ajax对象发送请求时，浏览器会锁定当前页面，用户只能等待，不会销毁页面）。

②xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器）

③xhr.send(null);：发送请求参数，因为参数已经写在了请求资源路径中，所以这里为null。

step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。

step4：编写事件处理函数

functionf1(){

if(xhr.readyState==4){

vartxt=xhr.responseText;

dom操作……

}

2）发送post请求：

step2：使用Ajax对象发送post请求

①xhr('post','check_username.do',true);：建立连接

②xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');：发送一个content-type消息头

③xhr.onreadystatechange=func1();：绑定一个事件处理函数（监听器）

④xhr.send('username=chang');：发送请求参数

u注意事项：

v与get请求不同，请求参数要放到send方法里面。

v因为按照HTTP协议的要求，发送post请求时，应该发送一个content-type消息头，而Ajax对象在默认情况下，不会发送这个消息头，所以，需要调用setRequestHeader方法来添加。

step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。

step4：编写事件处理函数

1.5编码问题

1）发get请求

①乱码产生的原因：

IE浏览器内置的Ajax对象会使用“GBK"或"GB2312“对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务器端，默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集（编码格式）不一致，所以，会出现乱码问题。

②解决：

step1：设置服务器使用指定的字符集去解码。比如，可以修改Tomcat的server.xml配置（conf文件夹中），添加URIEncoding="utf-8"（告诉服务器，对于所有的get请求，默认使用“utf-8”去解码），修改之后重新启动服务器。

<Connectorport="8080"maxHttpHeaderSize="8192"

maxThreads="150"minSpareThreads="25"maxSpareThreads="75"

enableLookups="false"redirectPort="8443"acceptCount="100"

connectionTimeout="20000"disableUploadTimeout="true"URIEncoding="utf-8"/>

step2：使用encodeURI()函数（JS中内置函数）对请求地址进行编码。encodeURI()函数会使用“utf-8”进行编码

xhr.open('get','check_username.do?username='+$F('username'),true);

varuir='check_username.do?username='+$F('username');

2）发post请求

①乱码问题产生的原因：

所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）内置的Ajax对象都会使用“utf-8”对中文参数进行编码，而服务器默认情况下，会使用“ISO-8859-1”去解码。

u注意事项：Firefox特殊，本应是乱码，但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加"charset=utf-8"。

服务器端添加：request.setCharacterEncoding("utf-8");

1.6Ajax的优点

1）页面无刷新，不打断用户的操作。

2）按需要获取数据，客户端（浏览器）与服务器端之间的数据传输量大大减少。

3）是一种标准化的技术，不需要下载任何插件。

1.7缓存问题（IE浏览器）

1）当发送get请求时

IE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否访问过，如果访问过，则不再向服务器发送请求。

2）解决方式

方式一：在请求地址后面添加一个随机数，用于欺骗IE，例如：

xhr.open('get','getNumber.do?'+Math.random(),helvetica; line-height:18px; text-indent:21pt"> 方式二：使用post方式发请求。

3）案例：在IE浏览器中测试缓存问题

step1：getNumber.jsp页面

<ahref="javascript:;"onclick="getNumber();">点这儿，在链接底下显示一个随机数</a>

<divid="d1"></div>

step2：JS代码getNumber函数

functiongetNumber(){

varxhr=getXhr();

xhr.open('get',true);//若没随机数，则点链接不会变化

xhr.onreadystatechange=function(){

$('d1').innerHTML=txt; } };

xhr.send(null); }

step3：Servlet中service方法中的if判断

if(action.equals("/getNumber")){

Randomr=newRandom();

intnumber=r.nextInt(10000);

System.out.println(number);

out.println(number); }

1.8案例：简易注册（使用Ajax进行相关验证，get请求）

step1：编写myScript.js并放在js文件夹中

此处省略三个函数，详看1.2

functioncheck_username(){//检查用户名，get请求

varxhr=getXhr();//step1获得Ajax对象

//step2使用Ajax对象发送请求

//绑定一个事件处理函数，里面的代码在状态改变时执行，且状态为4时执行if语句

if(xhr.status==200){//服务器返回了正确的结果

//只有readyState为4时，Ajax对象才获得服务器返回的所有数据

$('username_msg').innerHTML=txt;//利用服务器返回的数据更新页面

}else{//服务器运行出错

$('username_msg').innerHTML='验证出错';} }

};

$('username_msg').innerHTML='正在验证...';//模拟用户量较大的情况，显示正在验证

functioncheck_number(){//检查验证码

$('number_msg').innerHTML=txt; } };

step2：编写regist.jsp页面，get请求

<formaction="regist.do"method="get">

<fieldset>

<legend>注册</legend>

用户名：<inputtype="text"name="username"id="username"

onblur="check_username();"/>

<spanclass="tips"id="username_msg"></span><br/>

真实姓名：<inputtype="text"name="name"/><br/>

验证码：<inputtype="text"name="number"id="number"

onblur="check_number();"/>

<imgsrc="checkcode"id="img1"onclick="this.src='checkcode?'+Math.random();"/>

<ahref="javascript:;"onclick="$('img1').src='checkcode?'+Math.random();">

看不清换一个</a>

<spanclass="tips"id="number_msg"></span><br/>

<inputtype="submit"value="提交"/>

</fieldset>

</form>

u注意事项：href="javascript:;"相当于href="#"，写成href="javascript:;"一般要和onclick事件一起使用，表示a元素不再指向一个地址，而是点击后触发一个事件。

step3：ActionServlet中service方法

response.setContentType("text/html;charset=utf-8");

PrintWriterout=response.getWriter();

Stringuri=request.getRequestURI();

Stringaction=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

if(action.equals("/check_username")){

Stringusername=request.getParameter("username");

// try{//模拟耗时操作

// Thread.sleep(6000);}catch(InterruptedExceptione){e.printStackTrace(); }

if(1==1){//模拟一个系统异常

thrownewServletException("someerror"); }

if(username.equals("常")){

out.println("已被占用");}else{out.println("可以使用");}

}elseif(action.equals("/check_number")){

Stringnumber1=request.getParameter("number");

HttpSessionsession=request.getSession();

Stringnumber2=(String)session.getAttribute("number");

if(number1.equalsIgnoreCase(number2)){ out.println("验证码正确");

}else{ out.println("验证码错误");}

}elseif(action.equals("/regist")){

//加上验证代码，比如检查用户名是否正确，验证码是否正确，此处略

System.out.println("注册成功");}

step4：CheckcodeServlet借用之前Servlet笔记中13.20案例，随机生成验证码

1.9案例：修改1.8案例，使用post请求

step1：修改regist.jsp页面请求方式为post

step2：添加JS验证代码check_username_post

functioncheck_username_post(){

xhr.open('post',helvetica; line-height:18px; text-indent:21pt"> //添加一个消息头

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

$('username_msg').innerHTML=txt; } };

xhr.send('username='+$F('username')); }

1.10案例：使用Ajax实现下拉列表

step1：ActionServlet中service方法中的if判断

if(action.equals("/select")){

Stringname=request.getParameter("name");

if(name.equals("qq")){out.println("性价比高");

}elseif(name.equals("bmw")){ out.println("驾驶性能出众");

}else{ out.println("好车,也贵"); } }

step2：select.jsp页面

<selectid="s1"onchange="change(this.value);">

<optionvalue="qq">QQ</option> <optionvalue="bmw">宝马</option>

<optionvalue="ff">法拉利</option></select>

step3：JavaScript代码

functionchange(value){

varxhr=getXhr(); xhr.open('get','select.do?name='+value,helvetica; line-height:18px; text-indent:21pt"> if(xhr.readyState==4){ vartxt=xhr.responseText;$('d1').innerHTML=txt; }

xhr.send(null); }

二、JSON

2.1什么是JSON

JavaScriptObjectNatation，是一种轻量级的数据交换技术规范（因为借鉴了JavaScript对象创建的一种语法结构，故命名为JSON，详情见JavaScript第8章）。

2.2数据交换

将数据转换成一种中间的，与平台无关的数据格式（比如Xml或者JSON字符串）发送给另外一方来处理。

2.3轻量级

JSON相对于Xml，所需的数据大小要小的多，并且解析的速度更快。因此Xml现在用的少了（Ajax中的x即指用Xml交换数据）。

2.4JSON语法（www.json.org）

1）如何表示一个对象

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

u注意事项：

v属性名要使用引号括起来。

v属性值如果是字符串，要使用引号括起来。

v属性值可以是string、number、boolean、null、object。

例如：functionf1(){//表示一个对象

varobj={'name':'chang','age':22}; alert(obj.name); }

functionf2(){//表示一个对象

varobj={'name':'bo','address':{'city':'beijing','room':'1101' } };

alert(obj.address.room); }

u注意事项：JavaScript中创建对象的三种方式（也可看JavaScript笔记中的第8章）：

方式一：使用Json语法来创建

varp={'name':'zs','age':22};

方式二：使用Object来创建

varobj=newObject(); obj.name='zs'; obj.age=22;

方式三：利用JavaScript函数来创建（对象模版）

functionPerson(name,age){

this.name=name; this.age=age; }

varperson1=newPerson("zs",22)

2）如何表示一个对象组成的数组，[{},{},……]

例如：functionf3(){//表示一个对象组成的数组

vararr=[{'name':'chang','age':22},{'name':'bo','age':23}];

alert(arr[1].name); }

2.5如何使用JSON来编写Ajax应用程序

………………

…………

……

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!