AJAX

1、ajax是什么？asynchronous javascript and xml。

ajax技术，是为了改善“用户体验”而产生的。传统的web应用，在发送完请求以后，需要等待服务器的响应，在等待期间，用户不能做其它操作（需要等待服务器返回一个新的页面）。这样做，有两个问题：第一个是用户需要等待（也就是，浏览器向服务器发送请求的方式是“同步”的。），第二个是，浏览器需要将整个页面中的表单数据都提交给服务器，服务器也要生成一个全新的页面再返回给浏览器（也就是，浏览器与服务器之间，通讯的数据量非常大）。在ajax技术当中，使用浏览器内置的一个对象XmlHttpRequest向服务器发送请求（也就是说，不需要通过表单提交的方式，就可以向服务器发送请求，并且，这种请求方式是异步的），此时，用户可以继续对页面进行操作，不需要等待服务器的响应。当服务器处理完请求之后，不需要返回一个新的页面，只需要返回部分数据，然后，在浏览器（客户端），使用javascript，更新部分页面（使用dom），整个过程，页面无刷新。

2、ajax编程

step1 获得XmlHttpRequest对象。

该对象没有标准化，需要依据浏览器类型来分别创建。

var xhr = null;

if ((typeof XMLHttpRequest) != 'undefined') {

// FF

xmlHttpRequest = new XMLHttpRequest();

}else {

// IE

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

}

step2 使用XmlHttpRequest向服务器发送请求。

方式一：发送get请求。

a, xhr.open(请求方式,请求的url地址,是否异步);

比如: xhr.open("get","vali.do?username=zs",true); true表示异步，false同步。

b, xhr.onreadystatechange=f1; 注册一个事件处理函数。

c,xhr.send(null);

方式二：发送post请求。

a, xhr.open(请求方式,请求的url地址,是否异步);

比如: xhr.open("post","vali.do",true); true表示异步，false同步。

b,xhr.setRequestHeader(

"Content-Type",

"application/x-www-form-urlencoded");

c,xhr.onreadystatechange=f1;

d,xhr.send("username=zs");

step3 在服务器，处理请求。

step4 在事件处理函数当中，处理服务器返回的数据。

if(xhr.readyState == 4){

var txt = xhr.responseText;

//使用txt，更新dom。

}

3、XmlHttpRequest对象的几个属性:

1）readyState:是一个number值，表示该对象与服务器的通讯的状态：

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

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用。

3 (数据传送中) 已接收部分数据。

4 (响应结束)，已接收所有数据。

2）responseText:返回的文本。

3）responseXml:返回的符合w3c规范的xml dom对象。

4）status:返回状态码

4、编码问题

1）链接地址包含中文。浏览器会对链接地址中的中文进行编码（也包括空格、拉丁字母等字符）。会采用utf-8编码格式。在服务器端，大部分服务器默认情况下，对get请求中的数据，会采用iso8859-1解码。解决方式：对于tomcat，可以修改tomcat_home/conf/server.xml，添加URIEncoding="utf-8";

2）链接地址中，包含中文参数。

浏览器会采用打开页面时的编码来对中文进行编码。

解决方式一：指定页面的编码与URIEncoding="utf-8"一致。

解决方式二：对中文参数，使用URLEncoder.encode(中文参数,"utf-8")来编码。

3）ajax应用中的中文问题。

对于get请求，如果是ie,采用gbk/gb2312编码。如果是firefox，采用utf-8编码。解决方式：使用encodeURI(url地址):对url地址进行编码，采用的编码是utf-8。

练习：

给注册页面添加验证码，焦点失去，立即验证。

点击"confirm",完成注册。

要求支持中文。

JQuery

1.选择器(基本)

1) element $("p") $("div")

2) #id $("#d1")

3) .class $(".c1")

4) * $("*")

5) $("#c1,#c2,p")

2.

1) $("#t1 tr");

2) $("#t2 > tr")

3) $("#d1 + span" )

2. 基本方法

1) css("","") css("")

2) text("") text();

3) bind("",function(){$(this)})

-------------------------------------------------------------------

1.jQuery学习要点

(1)jQuery作用

jQuery是一款JavaScript脚本库,用于简化js开发. 其宗旨是Write less do more!

(2)前期要点

a.区分jQuery对象与DOM对象

DOM对象:document,document.getElementById,document.getElementsByTagName,this jQuery对象:jQuery选择器选出的对象, $(document),$("sohu"),$(this)

jQuery对象本质就是DOM对象的集合.