Ajax请求汇总(一)
刚开始结束Ajax请求的时候,那真的是迷迷糊糊,昏天暗地,通过学习的深入和翻阅各种资料、求助度娘,总结一下Ajax请求,与大家分享一下,希望能给学习Ajax的同学一些帮助,废话不多手,直接开始~~~
一、Ajax请求的原理
1.原理:在Ajax请求中,html页面的中操作将通过Ajax引擎与服务器端进行通讯,然后将返回的结果提交到客户端页面的Ajax引擎,再由Ajax引擎来决定将服务器端返回数据插入到页面的指定位置。从而实现无需刷新页面的http请求。 看图:
2.Ajax请求的优点
a.当然最大的优点就是,无需刷新就可更新页面
b.可以把原先服务器端负担的工作的转移客户端,利用客户端的闲置资源进行处理,减轻服务器和带宽的负担,节约空间和成本
c.Ajax没有平台限制。Ajax把服务器由原先的传送内容转变为传输数据,而数据格式可以为纯文本和XML格式,这两种格式没有平台限制。
d.可以调用Xml等外部数据,进一步促进页面的显示和数据的分离
3.Ajax使用的技术
a.XMLHttpRequest对象
b.XML
c.JavaScript
d.Css
e.DOM
4.Ajax请求时性能的优化
a.尽量使用局部变量,不要使用全局变量
b.优化for循环
c.尽量少使用eval,每次使用eval都会浪费大量时间
d.将DOM节点附加到文档上
e.尽量减少使用点“.”号操作符的使用
二、不同方式的Ajax请求
1.原生js的ajax请求
a.初始化XMLHttpRequest对象
/* IE6以上的浏览器*/
var http_request = new ActiveXObject("Msxml2.XMLHTTP") 或者: var http_request = new ActiveXObject("Microsoft.XMLHTTP")
/* 非IE浏览器(firefox,Opera,Mozilla,Safari)*/
var http_request = new XMLHttpRequest()
考虑到浏览器的兼容性,需要创建一个跨浏览器的XMLHttpRequest对象,如下:
var http_request;
if (window.XMLHttpRequest) { //兼容非IE浏览器
http_request = new XMLHttpRequest()
} else if (window.ActiveXObject) { //兼容IE6以上的浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
}
b.XMLHttpRequest对象的常用方法
----创建新请求的方法
open()方法用于设置进行异步请求目标的URL,请求方法以及其他参数信息
open("methods","URL","asyncFlag")
methods:用于请求的指定类型,一般为POST或者GET
URL:用于指定的请求地址,可以用绝对地址和相对地址,并且可以传递查询字符串
asyncFlag:可选参数,用于指定请求方式,异步请求为true,同步请求为false,默认为true
----向服务器发送请求的方法
send()方法用于向服务器发送请求。如果请求声明为异步,该方法立即返回,否则将会等到接收到响应为止
send(content)
content:用于指定发送的数据,可以是DOM对象的实例,字符串等,如果没用参数,需要传递设置为null
举个例子:
需要向服务器发送一个没有参数的请求,如下:
http_request.send(null)
----设置请求的HTTP头的方法
setRequestHeader("header","value")
header:用于指定的HTTP头
value:用于指定的HTTP头的设置值
注意:setRequestHeader()方法调用需要在open()方法之后
例如:
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
----停止、放弃当前异步请求的方法
abort()
例子:停止当前的异步请求http_request.abort()
c.XMLHttpRequest对象的常用属性
1.onreadystatechange:用于指定状态改变时所触发的事件处理器属性,在Ajax中,每个状态改变时都会触发
这个事件处理器,通常会调用一个Javascript函数
http_request.onreadystatechange = function(){}
2.readystate:请求状态的属性
readystate属性的属性值的意义:
0:未初始化 1:正在加载 2:已加载 3:交互中 4:完成
在实际应用中,该属性的经常用于判断请求状态,当请求状态为4时,在判断请求是否成功,如果成功,就开始处理返回结果
3.responseText:获取服务器的字符串响应的属性
接收响应:var text = http_request.responseText
4.responseXML:获取服务器的XML响应的属性
接收响应:var xmldoc = http_request.responseXML
5.status:返回服务器的HTTP状态码的属性
格式:http_request.status
状态码:
100:继续发送请求 200:请求成功
202:请求被接受,但尚未成功 400:错误的请求
404:文件未找到 408:请求超时
500:内部服务器错误 501:服务器不支持当前请求所需要的某个功能
注意:status属性只能在send()方法返回成功时,才能调用
当请求完成之后:
if (http_request.readystate === 4) {
if (http_request.status === 200) {
alert("请求成功")
} else {
alert("请求失败")
}
}
Ajax请求汇总(一)的更多相关文章
- 一步步学习javascript基础篇(9):ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 配置Chrome支持本地(file协议)的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- ajax请求成功后打开新开窗口(window.open())被拦截的解决方法
问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...
- 关于ajax请求,在参数中添加时间戳的必要性
之前做项目的时候,看到别人的前端ajax请求代码中,都会带有一个时间戳类型的参数,当时随便查了一下,是为了防止浏览器缓存的原因,所以也没有进行深究,每次写的时候也习惯性的带一个,最近新项目中,我发现好 ...
- SpringMVC下Ajax请求的方法,@Responsebody如果返回的是布尔值,ajax不会接到任何回传数据
SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...
- 【学习篇:他山之石,把玉攻】Ajax请求安全性讨论
在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...
- jQuery Ajax请求(关于火狐下SyntaxError: missing ] after element list ajax返回json,var json = eval("("+data+")"); 报错)
$.ajax({ contentType: "application/x-www-form-urlencoded;charset=UTF-8" , type: &quo ...
- 利用闭包实现多次ajax请求只执行最后一次
点一个按钮,则向服务器请求资源,不作处理时,多次点击后会有很多个请求在等待.我们知道一般我们用ajax是异步请求,那么我们快速重复点击一个按钮得到的结果其实我们并不知道是哪次点击的结果可能是第一次可能 ...
随机推荐
- 微信小程序,前端大梦想(二)
微信小程序的视图与渲染 今天我们从四个方面来了解小程序: •组件的基本使用 •数据绑定 •渲染标签 •模板的使用 一.组件的基本使用: 微信小程序为我们的开发提供了丰富的UI组件 ...
- NOIP2014D2T2寻找道路
洛谷传送门 这道题可以把边都反着存一遍,从终点开始深搜,然后把到不了的点 和它们所指向的点都去掉. 最后在剩余的点里跑一遍spfa就可以了. --代码 #include <cstdio> ...
- 【shell编程基础3】shell编程的组合应用之二:管道及其命令
预备知识: 管道:它是一个单向的,可以把前一个的数据输出导向到下一个命令的工具,这样可以实现多个命令组合处理一套数据. 它的符号是 "|" 管道只能处理经过前面一个命令传过 ...
- 【one day one linux】好用的数据处理工具awk
awk:好用的数据处理工具 取自<鸟哥私房菜>awk一节 应用:awk是以一行为一次的处理单位,将一行分成数个“字段”进行处理. #awk的命令格式 awk '条件类型1{动作1} 条件类 ...
- spring mvc中,直接注入的HttpServletRequst是否安全呢?
看似很简单的一个问题,借此追踪下spring的源码处理 在写springMVC的Control中有很多这种代码, 如需要获取request对象去做某些事情 如: @Controller @Reques ...
- 回到顶端的jquery
现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现.点击他会直接跳到页面的顶端.代码如下: html代码: <div id=" ...
- Tomcat access log配置
在tomcat的access中打印出请求的情况可以帮助我们分析问题,通常比较关注的有访问IP.线程号.访问url.返回状态码.访问时间.持续时间. 在Spring boot中使用了内嵌的tomcat, ...
- java线程控制安全
synchronized() 在线程运行的时候,有时会出现线程安全问题例如:买票程序,有可能会出现不同窗口买同一张编号的票 运行如下代码: public class runable implement ...
- js小数处理
js中的小数处理 先说说Math的几个方法: 1.Math.floor(x) 返回不大于当前数的最大整数. 我的记法:floor 直译 地板 也就是不大于的的意思 (x-0.5 四舍五入取整 ...
- Kafka协议兼容性改进
在Kafka 0.10.2.0之前,Kafka服务器端和客户端版本之间的兼容性是"单向"的,即高版本的broker可以处理低版本client的请求.反过来,低版本的broker不能 ...