深入解析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")
- Hadoop集群搭建总结及Hadoop2.5集群伪分布、完全分布搭建总结
- 【提高篇】Go语言并发技术详解
- 【提高篇】GO语言标准错误处理机制error用法实例
- 【Golang语言社区】H5游戏开发-从零开始开发一款H5小游戏(四) 撞击吧粒子,炫酷技能的实现
- 机器学习实践:用 Spark 和 DBSCAN 对地理定位数据进行聚类
- 【Golang语言社区】H5游戏开发从零开始开发一款H5小游戏(三) 攻守阵营,赋予粒子新的生命
- 【H5游戏实例】JS+canvas实现人机大战之五子棋
- Go包管理的探索与实践
- 机器学习优化算法之爬山算法小结
- 机器学习之最小二乘法
- Go中的同步与锁
- 机器学习之KNN算法思想及其实现
- 机器学习之决策树熵&信息增量求解算法实现
- 朴素贝叶斯分类器(离散型)算法实现(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 3分钟短文 | Laravel SQL筛选两个日期之间的记录,怎么写?
- 3分钟短文 | Laravel 内3种数据校验的写法,你喜欢哪一个?
- 纯JavaScript实现的MQTT智能门锁
- 3分钟短文 | Laravel 灵活地获取当前请求的路由地址
- 云原生安全 | docker容器逃逸
- 字节数组X中存放着 0~F共16个十六进制数,请将这些数以十六进制形式显示在屏幕上。
- ubuntu 16安装asp.net
- MYSQL Rewriter plugin 我那什么拯救你,垃圾系统
- 不使用华为om工具如何手工部署openGauss主从流复制环境
- 比较两个等长的字符串,若相同,则输出Match!,若不同,则输出No Match!
- 逻辑回归算法原理及实现
- Python链表详细笔记
- 26个你需要学习的Firefox配置技巧,改进体验和加快浏览器响应速度
- Softmax算法原理及实现
- Android Activity 活动的生命周期