深入解析AJAX的原理
AJAX:Asynchronous JavaScript And Xml(异步的JS和XML)
同步:客户端发起请求》服务端的处理和响应》客户端重新载入页面(循环)
异步:客户端实时请求》服务端处理和响应》客户端获得响应后局部刷新页面
异步实现的关键是,XMLHttpRequest对象的出现
创建XHR对象
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}
HTTP请求:无状态协议(不建立持久链接,服务器不保留记录是没有记忆),它的过程如下7步:
1、建立TCP连接
2、浏览器向服务器发送请求命令
3、浏览器发送请求头信息
4、服务器应答
5、服务器发送应答头信息
6、服务器想浏览器发送数据
7、服务器关闭TCP连接
HTTP请求的组成:请求的方法(get或post等);请求的URL;请求头(环境信息,身份验证);请求体。
HTTP响应的组成:状态码(200,304等);响应头(服务器时间,其他信息);响应体。
XHR对象的方法
open(method,url,async)//async同步还是异步,默认异步为true
send(string)
监听请求的响应是否成功
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4 && request.status===200){
request.responseText//取得响应体内容
}
}
用post提交表单时,需要在open和send中间添加一个设置
request.setRequesrHeader("Content-Type","application/x-www-form-rulencoded");
json解析两种方法:
var jsonData='{"staff":[{"name":"洪七公","age":70},{"name":"郭靖","age":35}]}'
var jsonObj=eval('('+jsonData+')');//容易产生错误,不会校验json是否合法,会直接执行json中的js语句
var jsonObj=JSON.parse(jsonData);//推荐
Jquery中的$.ajax([settings])
type:类型,“POST”或“GET”,默认“GET”
url:发送请求的地址
data:是一个对象,连同请求发送到服务器的数据
dataType:预期服务器返回的数据类型,一般为json,若不指定jquery将根据http包mime信息智能判断
success:方法,请求成功的回调函数,传入返回的数据及包含成功代码的字符串
error:方法,请求失败的回调函数,传入XMLHttpRequest对象
$.ajax({
type:"GET",
url:"sever.php?number"+$("#keyword").val(),
dataType:"json",
success:function(data){
if(data.success){alert(data.msg)}
},
error:function(err){
alert("错误状态码:"+err.status)
}
})
跨域
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。
方法一:后端代理
方法二:JSONP(支持get,不支持post)
<!--在www.aaa.com页面中-->
<script>
function jsonp(json){
alert(json["name"])
}
</script>
<script scr="http://www.bbb.com/jsonp.js"></script>
<!--在www.bbb.com页面中-->
jsonp({'name':"洪七公","age":70})
方法三:HTML5提供的XHR2(ie10以下版本不支持)
服务端增加如下(PHP)
header("Access-Control-Allow-Origin:*")
header("Access-Control-Allow-Methods:POST,GET")
深入解析AJAX的原理的更多相关文章
- ajax的原理解析
一.关于同步与异步的分析: 异步传输是面向字符的传输,它的单位是字符:而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的.而ajax就是采用的异步请求方式的. ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- ajax工作原理及jsonp跨域详解
一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...
- 理解AJAX的原理
1.原生ajax异步请求(ajax的原理) (异步请求:无跳转,无刷新....)通过XMLHttpRequst对象,向服务器发送请求.XMLHttpRequest对象具有一些属性和方法. 1.首先创建 ...
- ajax的原理及使用
ajax并非是一门新的技术,而是现有技术的一种新的组合用法,即是结合异步javascript和XML,它是一种创建快速动态网页的技术.其中,异步javascript是相对于同步而言的,同步模式通常称为 ...
- ajax工作原理/实例
ajax是什么? 是一种创建交互式网页应用的一种网页技术.简单来说,就是向服务器发起请求,获得数据使交互性和用户体验更好. ajax不是一种新的技术,是一些技术的集合体.有 1.XHTML和CSS 2 ...
- AJAX异步原理与实现
面试时问到了这个问题,说实话我还是不理解的,只是单单会使用.所以今天我看一下,自己了解下. 看了网上前辈们写的资料,我自己总结归纳ajax的原理和流程如下: 1.AJAX创建异步对象XMLHttpRe ...
- Ajax工作原理
在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...
- jQuery解析AJAX返回的html数据时碰到的问题与解决
$.ajax({ type : "post", url : "<%=request.getContextPath()%>/ce/articledetail/m ...
随机推荐
- python+selenium之多窗口切换
#打开浏览器driver = webdriver.Firefox()driver.get(url)#获取当前窗口now_handle=driver.current_window_handle # 获取 ...
- ERROR [org.apache.hadoop.util.Shell] - Failed to locate the winutils binary in the hadoop binary path
错误日志如下: -- ::, DEBUG [org.apache.hadoop.metrics2.lib.MutableMetricsFactory] - field org.apache.hadoo ...
- linux php 安装xdebug
我的环境是PHP 5.2.5,下载的xdebug是Xdebug v2.2.1 源码包 PHP 5.3.20用的是Xdebug v2.1.0 {版本一定要匹配} 下载地址为:http://xdebug ...
- 说说C#中的enum吧
enum,就是枚举类型,它是struct,int,single,double一样,都属于值类型,从ValueType类型中派生,存储在栈中.它在被创建时,不需要分配内在空间,所以对程序的性能是有好处的 ...
- linux安装jdk7步骤
linux安装jdk7步骤: 1.首先使用命令查看linux系统版本号: lsb_release -a 2.下载对应的jdk版本,笔者使用的是jdk-7u79-linux-x64.tar.gz: 3. ...
- flask SQLAlchemy--column 列的类型
最常用的SQLAlchemy列类型 类型名 Python类型 说 明 Integer int 普通整数,一般是 32 位 SmallInteger int 取值范围小的整数,一般是 16 位 BigI ...
- 浅谈WebService的调用
0.前言 前段时间,公司和电信有个合作,产品对接电信的某个平台,使用了WebService接口的调用,实现了业务受理以及单点登录.终于使用到了WebService,楼主还是比较兴奋的,目前功能已经上线 ...
- Java调用webservice接口方法(SOAP message、xfire、axis)
webservice的 发布一般都是使用WSDL(web service descriptive language)文件的样式来发布的,在WSDL文件里面,包含这个webservice暴露在外面可供使 ...
- 面向对象(OOP)三
一.面向对象基础原则 1)单一职责原则(类要写得小而精,低耦合) 内部类 单列模式 对于单一职责原则,其核心思想为:一个类,最好只做一件事,只有一个引起它的变化.单一职责原则可以看做是低耦合.高内聚在 ...
- Day2 HTML基本标签元素
Day2 HTML基本标签元素 HTML: 超文本标记语言(HyperText Mark-up Language ) 1.作用:写网页结构 2.HTML不区分大小写,建议小写 3.文 ...