ajax回顾

• AJAX   
• AJAX编程的主要步骤：
• 创建XMLHttpRequest对象
• 编写回调事件处理函数
• 创建请求
• 发送请求(最后一步才会触发回调函数)
• 创建XMLHttpRequest对象
• a.     所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
• b. 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
• c. 获取XMLHttpRequest对象的脚本:
• 编写回调事件处理函数
• 创建请求
• get请求
•   get请求中文问题：
•     编码设置
•   后台代码:
•   修改tomcat的配置
• post请求
• 创建请求
• get请求：
• post请求:
• 发送请求:

AJAX   

what: 一种改善客户端体验的技术。本质上就是在客户端使用js代码，通过浏览器中一个特殊的对象(XMLHttpRequest)异步（浏览器不会销毁当前的页面，客户可以在页面继续其他的操作而不被打断）的向服务器端发送请求，服务器端返回的是部分数据(可以是文本，xml,json),客户端接收到数据后，使用js将数据更新到页面中。整个过程没有页面的整体刷新，只是使用js进行局部刷新，用户操作不会被打断。

AJAX编程的主要步骤：

1. 创建XMLHttpRequest对象

2. 编写回调事件处理函数

3. 创建请求

4. 发送请求(最后一步才会触发回调函数)
   

创建XMLHttpRequest对象

a.     所有现代浏览器（IE7+、Firefox、Chrome、Safari以及 Opera）均内建 XMLHttpRequest对象。

?

1 2	var variable; variable= new  XMLHttpRequest();

b. 老版本的 Internet Explorer（IE5和 IE6）使用 ActiveX 对象：

?

1 2	var variable;      variable= new  ActiveXObject( "Microsoft.XMLHTTP" );

c. 获取XMLHttpRequest对象的脚本:

?

1 2 3 4 5 6 7 8 9

function getXhr(){      var variable;      if (window.XMLHttpRequest){          variable= new  XMLHttpRequest();      } else {          variable= new  ActiveXObject( "Microsoft.XMLHTTP" );      }      return  variable; }

编写回调事件处理函数

得到XMLHttpRequest对象之后，就可以编写回调事件处理函数了。

?

1 2 3 4 5 6

var xhr=getXhr(); xhr.onreadystatechange=function(){      //这儿编写用户自定义处理函数，  xhr的状态值有5种， 0，1，2，3，4      //这儿我们最关心的状态值是4 ，onreadystatechange函数中会触发2，3，4三种状态值      alert(xhr.readyState); //那么我们可以看到3中状态值，2，3，4 }

创建请求

get请求

?

1	xhr.open( 'get' , 'ajax.do' , true ) // 第一个参数为请求方式,get/post....  第二个参数为请求的url（参数可以直接附加在url后面）  第三个参数为是否是异步的请求true为是，false为否

  get请求中文问题：

    编码设置

    js代码:

?

1 2 3

var uri=encodeURL( 'check?name=张三' ); xhr.open( 'get' ,uri, true ); xhr.send();

  后台代码:

?

1 2	String name=request.getParameter( "name" ); name= new  String(name.getBytes( "ISO8859-1" ), "UTF-8" );

  修改tomcat的配置

?

1	在tomcat的conf目录下，找到server.xml中找到Connector 节点，添加属性  URLEncoding= "utf-8"

post请求

?

1 2 3

xhr.open( 'post' , 'ajax.do' , true );  // 普通的post请求可以直接这样使用 //如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后再send() 方法中规定您希望发送的数据： xhr.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" );

 post请求中文问题：

?

1 2	a. 在页面使用mate元素设置字符编码 b. 服务器端，使用request.setCharactorEncoding( "UTF-8" );

创建请求

get请求：

?

1	xhr.open( 'get' , 'check_name.do?name=zs' , true );

post请求:

?

1 2	xhr.open( 'post' , 'checkname.do?name=zs' , true ); xhr.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" );

发送请求:

?

1 2	xhr.send( null );  // or xhr.send( "name=zs&age=24&id=1" );