AJAX(Asynchronous Javascript And Xml)

前端之家收集整理的这篇文章主要介绍了AJAX(Asynchronous Javascript And Xml)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
基本的AJAX
1, 创建出xmlHttpRequest对象,在IE5,6中为ActiveXObject,其它的均为XMLHttpRequest对象,所以需要进行判断
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2, 打开请求
xmlHttp.open("GET/POST","请求路径",是否异步);
传递方式如果用GET,那么参数在请求路径后进行传递。后台获取为乱码。解决方法有2
第一种方式为将tomcat的编码设置为与页面相同的编码,通常为UTF-8
实施:找到tomcat的安装路径下的conf文件夹下的server.xml,找到Connector标签(配置端口号那个),
增加属性URIEncoding="UTF-8"即可
第二种方式为在传递参数时进行二次编码,在后台进行一次解码。
实施:前台:"logonAction.do?username="+encodeURI(encodeURI("张三"))
后台:URLDecoder.decode(request.getParameter("username"),"UTF-8");return String
如果用POST,那么参数在后面的send方法中进行传递。
GET比POST要快,但是没POST安全;
GET保存的数据有限,POST没有数据限制。


请求路径:这里的请求是做转发操作,并不是重定向,所以请求的路径必须是程序中的路径。
是否异步:基本上都会为true,为true时,会调用三次回调函数,为false时,只调用一次,所以根本就不需要回调函数了。
3, 设置回调函数
xmlHttp.onreadystatechange=函数名;
这里不需要双引号,如果异步为false,完全没必要设置回调函数,因为只会被调用一次。
4, 设置HTTP头
当传递方式为POST时,必须设置HTTP头,让数据可以像HTML中的POST一样。这样后台才能拿到POST的数据,否则拿不到。
设置代码xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
5, 发送参数
xmlHttp.send(参数=参数值&参数=参数值);
如果是GET,这里参数被忽略,仅仅只有在传递方式为POST时,send中的参数才能被获取到。

6, 获取回应数据
后台代码:PrintWriter pw = response.getWriter();
pw.write("回应的内容");
pw.close();
前台代码:if(xmlHttp.readystate==4 && xmlHttp.status==200){进行页面展示}
xmlHttp.responseText; //在xmlHttp.readystate=3时,responseText被赋值为回应的内容
这个数据在js中所有,那么就可以控制body中的数据。
如果是更新表格,那么就在后台输出一个表格进行更新。 如果是图片,那么就在后台输出一个图片进行更新。 原文链接:https://www.f2er.com/ajax/165417.html

猜你在找的Ajax相关文章