首页 > 代码库 > AJAX

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  优点:统一管理,无需记录参数位置,容易维护修改


AJAX