Ajax详解

===》Ajax详解《===

Ajax特性

1

1、Ajax是什么?

Asynchronous javascript and xml :异步的JS和XML

2

2、异步交互和同步交互

同步

--->发一个请求,就要等待服务器的响应结束。然后才能发第二个请求!中间这段时间就是一个字“卡”

--->刷新的是整个页面!!

异步

--->发一个请求后,无需等待服务器的响应,然后就可以发第二个请求!

--->可以使用JS结束服务器的响应,然后使用JS来局部来机新

3

3、Ajax常见应用场景

百度搜索框

用户注册时(用户名是否已被注册)

4

4、Ajax的优缺点

优点

--->异步交互;增强了用户的体验!

--->性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了

缺点:

Ajax不能应用在所有场景!

Ajax无端的增多了对服务器的访问次数,给服务器到来了压力!

Ajax发送异步请求(四步操作)

1

* Ajax其实只需学习一个对象:XMLHttpRequest,如果掌握了他,就掌握了Ajax!!

* 得到XMLHttpRequest

大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();

IE6.0:var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

编写创建XMLHttpRequest对象的函数

functioncreateXMLHttpRequest(){

try{

return newXMLHttpRequest();

}catch(e){

try{

return newActiveXObject("Msxml2.XMLHTT P");

}catch(e){

try{

return newActiveXObject("Microsoft.XMLHTT P");

}catch(e){

alert(哥儿们,你用的是什么浏览 器???);

throw e;

}

}

}

}

2

服务器连接

---xmlHttp.open();用来打开与服务器的连接,它需要三个参数:

》请求方式:可以是GET或POST

》请求的URL:制定服务器端资源,例如:/day1/AServlet

》请求是否为异步:如果为true表示发送异步请求,否则为同步请求!

---xmlHttp.open("GET","/day1/AServlet",true);

3

发送请求

---xmlHttp。send(null);如果不给可能会造成部分浏览器无法发送!

》 参数:就是请求体内容!如果是GET请求,必须给出null。

4

---在xmlHttp对象的一个事件上注册监听器:onreadystatechange

---xmlHttp对象一共有5个状态:

》0状态:刚创建,还没有调用open方法;

》1状态:请求开始:调用了open方法,但还没有调用send()方法

》2状态:调用玩了send()方法;

》3状态:服务器已经开始响应,但不表示响应结束!

》4状态:服务器响应结束!(通常我们只关心这个状态)

---得到xmlHttp对象的状态:

》var state=xmlHttp.readState;//可能是0、1、2、3、4

---得到服务器响应的状态码

》var status=xmlHttp.status;//例如200、404、500

---得到服务器响应的内容

》var content =xmlHttp.responseText;//得到服务器的响应的文本格式的内容

》var content =xmlHttp.responseXML;//得到服务器的响应的XML响应的内容,它是Document对象了!

xmlHttp.onreadystatechange=function(){//xmlHttp的5种状态都会调用本方法

if(xmlHttp.readyState==4 && xmlHttp.status==200){//双重判断:判断是否为4状态,而且还要判断是否为200

//获取服务器的响应内容

var text =xmlHttp.responseText;

}

};

第二例:发送POST请求(如果发送请求时需要带有参数,一般都用POST请求)

* open:xmlHttp.open("POST" ....);

* 添加一步:设置Content-Type请求头:

> xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

* send:xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体

第三例:注册表单之校验用户是否注册!

1

编写页面:

* ajax3.jsp

> 给出注册表单页面

> 给用户名文本框添加onblur事件的监听

> 获取文本框的内容,通过ajax4步发送给服务器,得到响应结果

* 如果为1:在文本框后显示“用户名已被注册”

* 如果为0:什么都不做!

2

2编写Servlet

* ValidateUsernameServlet

> 获取客户端传递的用户名参数

> 判断是否为itcast

* 是:返回1

* 否:返回0

第四例:响应内容为xml数据

* 服务器端:

> 设置响应头:ContentType,其值为:text/xml;charset=utf-8

* 客户端:

> var doc = xmlHttp.responseXML;//得到的是Document对象!

第五例:省市联动

1

1. 页面

===请选择省份===

===请选择城市===

2

2. ProvinceServlet

* ProvinceServlet:当页面加载完毕后马上请求这个Servlet!

> 它需要加载china.xml文件,把所有的省的名称使用字符串发送给客户端!

3

3. 页面的工作

* 获取这个字符串,使用逗号分隔,得到数组

* 循环遍历每个字符串(省份的名称),使用每个字符串创建一个元素添加到这个元素中

4

4. CityServlet

* CityServlet:当页面选择某个省时,发送请求!

* 得到省份的名称,加载china.xml文件,查询出该省份对应的元素对象!,把这个元素转换成xml字符串,发送给客户端

5

5. 页面的工作

* 把中的所有子元素删除,但不要删除===请选择城市===

* 得到服务器的响应结果:doc!!!

* 获取所有的子元素,循环遍历,得到的内容

* 使用每个的内容创建一个元素,添加到

作者:阿吃UAdaill

本文来自企鹅号 - Hacker凯文媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术点滴

RedHat7下PostGIS源码安装1. PostgreSQL2. PostGIS3. 简单测试参考资料

顺便安装postgresql-devel、libxml2-devel,后边编译安装PostGIS会用到。

732
来自专栏北京马哥教育

不服来战!这20类500个常用命令参数你一定记不到50%

公告:今天加班的都是好人!好人!好人! 本文由马哥教育面授班24期学员推荐,转载自互联网,作者为LVS,内容略经小编改编和加工,观点跟作者无关,最后感谢作者的辛...

2658
来自专栏文渊之博

MySQL常见备份方案

2160
来自专栏鬼谷君

mysql权限与安全

1134
来自专栏有趣的django

4. sudo,PATH环境变量,修改字符集,ntpserver,加大文件描述符,隐藏内核版本,锁定关键系统文件

1   命令:  visudo            98gg      98行             yy           复制当前行         ...

3216
来自专栏技术点滴

RedHat7下PostGIS源码安装1. PostgreSQL2. PostGIS3. 简单测试参考资料

本文介绍在RedHat7环境下安装使用PostGIS的流程。 1. PostgreSQL 1.1 yum安装PostgreSQL 这个比较简单,直接使用yum安...

1926
来自专栏前端儿

在找一份相对完整的Webpack项目配置指南么?这里有

Webpack已升级为v4版本,优化之后性能提升好几倍,请移步这个 webpack4项目配置Demo,以及 这篇升级优化点

751
来自专栏web

Ajax XMLHttpRequest对象的三个属性以及open和send方法

1234
来自专栏python3

diango路由分发

1个Django 项目里面有多个APP目录大家共有一个 url容易造成混淆,于是路由分发让每个APP的拥有了自己单独的url

1013
来自专栏WindCoder

Discuz!X3.1QQ互联Unknown column 'conuintoken' in 'field list'的解决办法

571

扫描关注云+社区