Ajax核心技术之XMLHttpRequest
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的更多相关文章
- Ajax核心技术代码
/* @author weichen */ var xhr = ''; function Ajax() { if(window.XMLHttpRequest) { var xhr = new XMLH ...
- $.ajax通用格式&&XMLHttpRequest对象属性和方法
$.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, da ...
- Ajax技术---核心XMLHttpRequest对象
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...
- AJAX原理及XMLHttpRequest对象分析
今天的主题是前端都了解的AJAX,但其中都有哪些知识点,还需要深入分析. 首先揭示AJAX的字面意思,Asynchronous Javascript And XML,通俗点就是“异步Javascrip ...
- Ajax中的XMLHttpRequest对象详解
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- Ajax错误 “SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成” 的归纳总结
最近在做Asp.net项目的时候,用Ajax访问服务器数据有时候老是莫名其妙的报错:SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而 ...
- ajax开发框架和XMLhttpRequest、responseText、responseXml和JSON的应用
1 AJAX开发框架 2 A 初始化XMLHttpRequest对象 3 B指定响应处理函数 4 C发出HTTP请求 5 D处理服务器返回的信息 6 数据格式提要 6 优点 6 缺点 7 解析 JSO ...
- 学习笔记 之--AJAX核心对象 XMLHttpRequest
实现AJAX功能,核心就是XMLHttpRequest,而且现在大多数浏览器都支持这个核心组件对象. 实例:实现无刷新登陆验证 1.前台代码 <html xmlns="http://w ...
- js 发送ajax请求(XMLHttpRequest)
<!DOCTYPE html><html> <head> <title></title> <script type="tex ...
随机推荐
- hiho1269 优化延迟 ([Offer收割]编程练习赛1)
一道中文题,就不用翻译了. 大意是讲,一串数字,可以按照输入的先后顺序扔到一个固定大小的缓冲池子里,这个池子里的数输出顺序随意.然后计算—— SP=1*Pi1+2*Pi2+3*Pi3+...+N*Pi ...
- BZOJ4277 : [ONTAK2015]Cięcie
假设分成如下三段: [1..i][i+1..j][j+1..n] 考虑中间那一段,设f[i]为前i位组成的数模q的值,pow[i]为$10^i$模q的值,那么有: f[j]-f[i]*pow[j-i] ...
- BZOJ4115 : [Wf2015]Tile Cutting
设一种方案里三角形上三个点的坐标分别为$(0,0),(-a,b),(c,d)$,则得到的平行四边形的面积为$ac+bd$. 设$d(n)$为$n$的约数个数,$D$为$d$的生成函数,则答案的生成函数 ...
- ios手机填坑总结
1. 日期格式 ios系统.safari只能识别"2018/10/15 00:00:00",不能识别"2018-10-15 00:00:00",所以需要转换格式 ...
- Delphi模拟最小化恢复关闭按纽
https://yq.aliyun.com/wenji/96083 本文讲的是Delphi模拟最小化恢复关闭按纽, 我们做多文档应用程序开发时,如果在主From中指定mainMenu时,在主菜单上右角 ...
- future封装了callable,thread封装future。
三.使用Callable,Future返回结果 总结:future封装了callable,thread封装future.将callable的返回结果封装在future中,thread封装future, ...
- Linux isql
登录Linux环境,执行 isql -s 命令,进入isql命令页面 进入后页面如下: 选择Query-Language回车,选项可进行数据库操作 进入后,选择要操作的数据库,回车 进行入数据库后的数 ...
- WordPress主题开发:截取标题或内容
截取可以用wp_trim_words() 用法: <?php $trimmed = wp_trim_words( $text, $num_words = 55, $more = null ); ...
- python测试开发django-32.admin后台多对多关系ManyToManyField
前言 一本书可以有多个作者,一个作者也可以写多本书,这种关系就是本篇要说的多对多关系. 这种场景在django里面数据库设计时候,需要用到ManyToManyField方法 多对多表设计 auther ...
- 明日传奇第三季/全集Legends of Tomorrow迅雷下载
<明日传奇>第三季将加入一名新的女性角色.据Variety得到的消息称,塔拉·阿什(Tala Ashe)将作为<明日传奇>第三季的常规演员加入该剧.在第三季中,塔拉·阿什饰演的 ...