您好,欢迎访问一九零五行业门户网

Ajax的优缺点是什么?ajax如何正确的使用

本篇文章主要的讲述关于封装ajax的介绍,还有关于ajax的异步请求,现在我们一起来看这篇文章吧
ajax        说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。
ajax的应用场景有:(地图)实时更新,表单验证等等....
ajax的优缺点:            优点:1.实现局部更新(无刷新状态下),2.减轻了服务器端的压力
缺点:1.破坏了浏览器前进和后退机制(因为ajax自动更新机制)
2.一个ajax请求多了,也会出现页面加载慢的情况。
3.搜索引擎的支持程度比较低。
4.ajax的安全性问题不太好(可以用数据加密解决)。
首先说明:如果要使用ajax必须要有后端环境的支持(服务器端)。
http请求            http请求有两种方式
get:用于获取数据,get是在url上传递数据(网址后面的东西),存储量较少,安全系数比较低。
post:用于上传数据,post安全性一般比(get好一些),容量几乎是无限(多用于表单)。
ajax的使用        使用ajax一共有4个步骤:1.创建ajax、2.连接服务器、3.发送请求、4.接受返回值。
创建ajax            创建ajax必须考虑兼容性处理,ie6以上:new xmlhttprequest()、ie6:new activexobject(microsoft.xmlhttp)
兼容处理
var xhr = null;if(window.xmlhttprequest){    xhr = new xmlhttprequest();} else{    xhr = new activexobject(mricosoft.xmlhttp);}
连接服务器
上面创建的ajax对象xhr,使用xhr.open(请求方式(get/post),url路径,“异步/同步”)。
第三个参数:true===》异步、false===》同步。(想看更多就到ajax开发手册栏目中学习)
当请求方式为post的时候,代码写法如上;
当请求方式为get的时候,使用xhr.open(请求方式(get/post),url路径 + “?”请求数据 +  ,“异步/同步”)。
发送请求                使用xhr.send()发送请求
当请求方式为get的时候,发送请求为xhr.send(null).
当请求方式为post的时候,发送请求为xhr.send(请求数据)。
此外使用post的时候必须在xhr.send(请求数据)上面添加
xhr.setrequestheader(content-type, application/x-www-form-urlencoded);
接收返回值        使用ajax会想用一个事件readystatechange事件:当请求被发送到服务器时,我们需要执行一些基于响应的操作。
当readystatechange改变的时候,就会触发这个事件执行。
readystate:请求的状态,返回的是状态码(0 - 4):0(未初始化)open还没有调用、1(载入)已经调用了send()正在发送请求、2(载入完成)send方法已经完成  已经收到了全部的响应内容、3(解析)正在解析响应内容、4(完成)响应内容解析完成  可以在客户端用了。
responsetext:返回请求的内容。
status:返回请求的结果码:返回200(成功)、返回404(未找到)、返回5**(5开头)(服务器错误)
封装ajax        在封装ajax的时候会使用到参数传递,因此必须写个方法作为对象属性转换为ajax请求数据的方法
下面是ajax封装,并举例:
function ajax(options){ var xhr = null; var params = formsparams(options.data); //创建对象 if(window.xmlhttprequest){ xhr = new xmlhttprequest() } else { xhr = new activexobject("microsoft.xmlhttp"); } // 连接 if(options.type == "get"){ xhr.open(options.type,options.url + "?"+ params,options.async); xhr.send(null) } else if(options.type == "post"){ xhr.open(options.type,options.url,options.async); xhr.setrequestheader("content-type","application/x-www-form-urlencoded"); xhr.send(params); } xhr.onreadystatechange = function(){ if(xhr.readystate == 4 && xhr.status == 200){ options.success(xhr.responsetext); } } function formsparams(data){ var arr = []; for(var prop in data){ arr.push(prop + "=" + data[prop]); } return arr.join("&"); }}ajax({ url : "a.php", // url---->地址 type : "post", // type ---> 请求方式 async : true, // async----> 同步:false,异步:true data : { //传入信息 name : "张三", age : 18 }, success : function(data){ //返回接受信息 console.log(data); }})
本篇文章到这就结束了(想看更多就到ajax使用手册栏目中学习),有问题的可以在下方留言提问。
以上就是ajax的优缺点是什么?ajax如何正确的使用的详细内容。
其它类似信息

推荐信息