Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换;JavaScript操作DOM实现动态效果;运用XHTML+CSS表达信息;XML和XSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。
使用方法
XMLHttpRequest五步使用法:
1.创建对象;
2.注册回调函数;
3.使用open方法设置和服务器交互的基本信息;
4.设置发送的数据,开始和服务器端交互;
5.实现回调函数。
由于每次应用XMLHttpRequest对象时,都要进行五步操作,因此,可将该对象的使用封装为js文件中,传递部分参数使用其方法就可以完成相应功能,实现如下:
//使用封装方法人员只提供http的请求,url地址,数据,成功和失败的回调的方法
//1.定义XMLHttpRequest对象的构造方法
var MyXMLHttpRequest =function(){
var xmlhttprequest;
if(window.XMLHttpRequest){
//IE7,IE8,FireFox,Mozillar,Safari,Opera
//alert("IE7,IE8,FireFox,Mozillar,Safari,Opera");
xmlhttprequest = new XMLHttpRequest();
//解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//IE6,IE5.5,IE5
alert("IE6,IE5.5,IE5");
var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var n=0;n
扩展问题
1.浏览器缓存
2.中文乱码
3.跨域访问
对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳,问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可:
//解决缓存的转换:增加时间戳
if(url.indexOf("?") >= 0 ){
url = url + "&t=" + (new Date())。valueOf();
} else {
url = url + "?t=" + (new Date())。valueOf();
}
//解决跨域的问题
if(url.indexOf("http://") >= 0) {
url.replace("?","&");
url = "Proxy?url=" + url;
}
问题3对应代理服务端实现:
/**
* Handles the HTTP GET method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取参数,最后得到请求url地址类似于:url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33
StringBuilder url = new StringBuilder();
url.append(request.getParameter("url"));
//获取访问的跨域地址url = http://192.168…/AJAX/AJAXServer
Enumeration enu = request.getParameterNames();
boolean flag = false; //定义标志变量,表示是否为拼接的第一个参数
while(enu.hasMoreElements()){
String paramName = (String) enu.nextElement();
if(!paramName.equals("url")){
String paramValue = request.getParameter(paramName);
paramValue = URLEncoder.encode(paramValue,"utf-8");
if(!flag){
url.append("?")。append(paramName)。append("=")。append(paramValue);
flag = true;
} else {
url.append("&")。append(paramName)。append("=")。append(paramValue);
}
}
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(url != null && url.length() > 0){
URL connectionUrl = new URL(url.toString());
BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),"utf-8"));
Ajax核心技术之XMLHttpRequest
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:SVN使用SASL加密
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
图书《数据资产管理核心技术与应用》分享
《数据资产管理核心技术与应用》-清华大学出版社-张永清等著
数据 获取数据 数据处理 数据血缘 元数据 -
Java核心技术之容器
Java容器类包含List、ArrayList、Vector及map、HashTable、HashMap、Hashset
java JSTL 集合 System Stack -
Docker核心技术之Cgroups浅析
docker linux cgroups
docker linux cgroup -
OpenGL核心技术之HDR
笔者介绍:姜雪伟。IT公司技术合伙人,IT高级讲师,CSD
浮点 颜色值 2d 着色器 3d