AJAX

请求

同步请求

请美女吃饭 等来了一起开吃

异步请求

请兄弟吃饭 先吃了再说，他来吃剩下的

按请求方式分

get

post

异步的好处

提高用户的体验度

减少数据的传输

典型应用：Google Maps!

异步代表Ajax

创建交互网页应用的网页技术开发

XML与JSON 都可以实现数据的传输

Ajax

1、创建Ajax对象

new XMLHttpRequest()

new ActiveXobject()

2、初始化对象(请求方式，资源路径，boolean(异步或者同步))

request.open();

3、监听响应状态，处理返回数据

request.onreadystatechange=function(){}

4、使用Ajax发送请求

request.send(null) //参数为post方式发送的数据

当请求方式为get时

1、缓存问题

通过在资源路径后加？random="+Math.random()可以解决缓存问题

2、乱码问题(三步缺一不可)

1、在server.xml中添加userBodyEncodingforURI=true

2、将中文数据传入encodeURIComponent("汉字")；

3、req.setcharacterEncoding("utf-8"))

当请求方式为post时

1、不存在缓存问题（当开始为get后来改为post，则get会遗留缓存，删除就可以了）

2、乱码问题

1.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;

2.reqeust.setCharacterEncoding)

Ajax的应用

1、响应信息的文本类型

1、文本类型 简单文本，效率高简单 req.responseText;可以获取文本内容

2、JSON

1、传输对象内容，var result=request.responseText;（返回字符串，所以必须转成Object类型）

2、eval("var j2="+result)（转为Object对象）

3、j2.realname(获取Json中realname对应的值)

3、XML类型

var result = request.responseXML;

alert(result.getElementsByTagName("uname")[0].firstChild.data);

2、服务器接受与响应

1、文本响应方式

resp.setCharacterEncoding("utf-8");

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

resp.getWriter().print("我是一个好人");

2、Json响应方式

resp.setCharacterEncoding("utf-8");

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

resp.getWriter().print("{uname:'zhangsan',realname:'张三'}");

3、XML响应方式

resp.setCharacterEncoding("utf-8");

resp.setContentType("text/xml;charset=utf-8");

resp.getWriter().print("<user><uname>王武</uname></user>");

总结：

1、文本传输最为方便简单，

2、xml数据结构清晰但需要在服务器中拼凑xml文件所以比较繁琐，而且xml的解析比较复杂，

3、JSON作为对象数据传输比较高效（通常使用）

三种方式的共同点

都需要 编码格式设置

resp.setCharacterEncoding("utf-8");

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

*js函数中当参数过多（多于4个），请用Json 优点：统一管理，无需记录参数位置，容易维护修改

（编辑：李大同）

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