相信大家已经对ajax已经很熟悉了吧,本站也讲了很多关于ajax的一系列的知识,今天小编则是讲的是原生js是如何封装ajax函数的呢?接下来就让我们一起了解下吧。
Ajax,是由Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的一种技术。
通过异步模式,提升了用户体验。优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大量用户下的服务器负载。
Ajax最大的特点就是局部刷新。
Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)
Ajax的封装函数
//把传入的所有数据看成一个对象obj
//示例 obj={type:"get",url:"data.json",data:{},success:function(){},error:function(){}}
/*obj里含要发送的请求类型:get 或 post
要有路径 url
传的值data 可有可无
后面是成功时success调用的方法,失败时error调用的方法
* */
//示例 obj={type:"get",url:"data.json",data:{},success:function(){},error:function(){}} /*obj里含要发送的请求类型:get 或 post 要有路径 url 传的值data 可有可无 后面是成功时success调用的方法,失败时error调用的方法 * */ function Ajax(obj) { if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //这个if语句 浏览器兼容 var str = ""; for (var attr in obj["data"]) { //遍历传入的数据data:{} str += attr + "=" + obj["data"][attr] + "&"; //属性=属性值 并以&连接 } //遍历data,并用&连接起来,但是最后是以&结尾的,要消除最后一个& str = str.replace(/&$/, ""); //把最后一个&替换为空(就是去掉最后那个&) if (obj["type"].toLowerCase() == "get") { //判断请求类型是get还是post,为防止大小写不匹配,全部转换为小写 if (obj["data"] === undefined) { //判断是否有data值 xhr.open("get", obj["url"], true); } else { xhr.open("get", obj["url"] + "?" + str, true); //get类型以?连接 } xhr.send(); } else { xhr.open("post", obj["url"], true); //post方式 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //post类型要加这句话,数据转换为form格式,死记 xhr.send(str); //注意传str } xhr.onreadystatechange = function () { //接收服务器返回的信息 if (xhr.readyState == 4) { if (xhr.status == 200) { var data = xhr.responseText; obj["success"](data); //成功时调用的方法 } else { if (obj["error"]) { //失败时调用的方法 obj["error"](); } } } } }
以上就是今天所讲的Java入门知识,是不是有了解掌握了呢?如果想要更多了解相关的Java知识,请继续关注本网站。