【javascript】脚本操作HTTP请求技术Ajax-1(GET请求)
来源:互联网 发布:软件使用许可证模板 编辑:程序博客网 时间:2024/05/16 07:26
在我们平常使用web浏览器访问网站时,大部分都是通过超链接或者是form表单对web服务器发送请求。同时,javascript脚本也可以通过修改window.location变量或者调用表单的submit()方法来让web浏览器发送请求。但这种方式的请求会刷新浏览器的页面。接下来我说的技术就是如何在web浏览器没有加载新页面的情况下发送一个http请求。
Ajax( Asynchronous Javascript and XML)技术,最早出现在2005年2月。这种技术涉及到了js脚本对dom,xml,json等不同文档类型操作,了解http协议状态的情况等等。
XMLHttpRequest对象,在很多书籍中都会有所讲到,实质上相当于浏览器开放了一个HTTP的API接口提供给javascript语言进行操作。所有的操作方法和属性都内置在XMLHttpRequest对象中。如果有一定了解HTTP协议的人,那么对这门技术掌握六七成了。同时请求方式为客户端像服务端主动建立连接,属于客户端推送的方式。那么不多说,我们开始创建一个这样的对象吧。
1.新建XMLHttpRequest对象
var xhr = new XMLHttpRequest(); //创建一个XMLHttpRequest对象。
这种创建方式适合大多数浏览器,如IE7+,FireFox,Chrome,Safari等等。但我们熟知的IE6以前是不支持这种创建方式的,因为以前的IE浏览器是通过加载插件的方式提供这样的接口。接下来的代码就是为了满足现有主流浏览器,创建XMLHttpRequest对象。
function createXHR(){ if( typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } if(typeof ActiveXobject == "undefined"){ throw new Error(" not support "); } //判断是否为 IE6或IE6以下版本 if(typeof arguments.callee.activeString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp3.0","MSXML2.XMLHttp"], i,len; for (var i = 0;i<versions.length;i++) { try{ //尝试使用不同版本的插件新建对象 new ActiveXobject(versions[i]); //将合适的版本保存至 activeString属性中 //arguments.callee代表的是调用函数,这里指的是createXHR arguments.callee.activeString=versions[i]; break; }catch(ex){ // no action } }; } //返回实例对象 return new ActiveXobject(arguments.callee.activeString);}
这样我们就可以通过以下代码创建具有操作HTTP请求的对象了。
var request = createXHR(); // 函数返回XMLHttpRequest对象
2.建立一个简单的GET请求
在这里,我使用了一个简单的函数,来处理普通的get请求。一般get请求多用于查询操作,因为它自带一定的浏览器缓存,以减少对服务器的压力。
/** * 发送普通的get请求 * @param {string} url 请求url * @param {[Object]} data 请求参数 * @param {[Object]} callback 回调函数 */function getData(url,data,callback){ var xhr = createXHR(); //新建一个XMLHttpRequest对象 if(arguments.length > 1){ url += "?" + encodeFormData(data); } xhr.open("GET",url); //打开一个请求 xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && callback){ callback(xhr); //将xhr对象传入回调函数 } } xhr.send(null); //请求发送}
这里出现里一些自定义的函数,以及XMLHttpRequest自带的事件,属性和方法.首先我们说下encodeFormData()函数,这是将对象的属性名和属性值序列化成HTTP协议的请求参数格式 键名1=键值1&键名2=键值2…. 具体的代码如下:
/** * [encodeFormData 生成合法的请求参数] * @param {[Object]} data * @return {[String]} */function encodeFormData(data){ if(!data){ return ""; } // 返回空字符串 var paris=[],name,value; for(name in data){ if(!data.hasOwnProperty(name)){ continue; } // 跳过继承属性 if(typeof data[name] == "function"){ continue; } //跳过函数类型 name = encodeURIComponent(name.replace('%20','+')); //名称编码 value = encodeURIComponent(data[name].replace('%20','+')); //值编码 paris.push(name+"="+value); //添加到paris数组中 } return paris.join("&");}
然后就是xhr.open()方法。这个方法主要有两个必须的部分,请求方式和URL地址。调用这个方法的目的是为了生成请求头部的信息。此时并没有对服务器进行请求操作。这里只是简单的介绍了这个方法。
接下来就是xhr.onreadystatechange 事件。与大多数事件一样,事件名称以on开头。这个事件触发的条件是xhr.readyState的值发生改变。而xhr.readyState总共有5个状态值.
1. UNSET 0 open()尚未调用 2. OPENED 1 open()已调用 3. HEADERS_RECEIVED 2 接收到头信息 4. LOADING 3 接受响应主题 5. DONE 4 响应完成
我们设置了这个触发后执行的函数后,通过判断readyState的值来确定响应是否完成。同时响应携带的信息都会添加到我们新建的xhr实例中去。响应完成后就会执行回调函数。
接下里我们只要使用getData()方法,然后处理获取到服务端的信息。
var url = "http://localhost:8080/home/user/isRegister"; //确保为同服务器的地址,跨域的情况暂时无法处理 主要来验证用户名是否存在var data ={ username : "liyanlong1993" }; // 字面量对象getData(url,data,checkRegister); //调用Ajax请求function checkRegister(res){ //获取响应头部类型 var type = res.getResponseHeader("Content-Type"), data; if(type === "application/json"){ //服务器返回的响应头数据格式为json类型 data = JSON.parse(res.responseText); }else{ alert('请求错误'); console.log('error request'); return ; } if(data.result === undefined){ console.log('返回格式不正确'); return ; } if(data.result){ console.log('用户已注册'); }else{ console.log('用户尚未注册'); }}
Ajax请求并非如只可以请求获取XML格式的数据,该例子则是获取JSON格式的数据。实际上得到的是文本数据,服务器端传递过来的响应头部信息为”application/json”。然后通过JSON.parse()方法进行转换。服务端发送的响应的主体如下截图所示:
确实是一个可以转换成JSON数据的文本字符串。
3.小结
整个过程,了解之后其实并不复杂。但Ajax所能做到的并不只是这些,接下来会介绍一些难度有所上升的知识。谢谢大家能看到这里。
- 【javascript】脚本操作HTTP请求技术Ajax-1(GET请求)
- 【javascript】脚本操作HTTP请求技术Ajax-2(POST请求)
- 【javascript】脚本操作HTTP请求技术Ajax-4 (进度事件)
- 【javascript】脚本操作HTTP请求技术Ajax-3 (单个文件上传)
- Ajax(1):get请求
- javascript发送get、post http请求
- javascript发送get、post http请求
- PHP发送HTTP请求(POST请求、GET请求)
- AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求[原创]
- AJAXCDR:利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求
- Ajax的get请求
- Ajax的get请求
- Ajax发送GET请求
- Ajax--Get请求
- Ajax发送GET请求
- ajax get方式请求
- ajax get/post请求
- Ajax GET请求
- 黑马程序员--java基础--Object类中的几个方法、包的概念
- Delphi 根据经纬度计算地球上两点之间的距离
- 2440平台,LED驱动模块,成功加载,rmmod可以卸载,但是总是报错
- MySQL中修改root密码的方式
- this 关键字
- 【javascript】脚本操作HTTP请求技术Ajax-1(GET请求)
- Android两次点击返回键退出应用
- delphi 获取某个页面所有的链接
- C语言 折半查找
- Delphi 模拟网站验证码
- swift开发之pop动画
- vs2012打包发布流程
- Delphi EmbeddedWB 遍历Frames并执行子frame的js脚本
- Delphi destroy, free, freeAndNil, release 函数的区别