ajax原理
1.创建XMLHttpRequest异步对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.设置请求方式和请求地址
xmlhttp.open('GET',?t+(new Date().getTime（）),true)
3.用send发送请求
xmlhttp.send()
4.监听状态变化
xmlhttp.onreadystatechange=function() {
//5.接收返回的数据
if(xmlhttp.readyState==4){ //0 请求未初始化 1 服务器连接已建立 2.请求已接收 3.请求处理中 4.请求已完成，且响应已就绪
//
if(xmlhttp.status=>200&&xmlhttp.status<300 || xmlhttp.status ===304){
console.log('接收返回的数据')
xmlhttp.reponeText //获取返回的数据
xmlhttp.response XML //获取到返回的xml
}else{
//没有接收到数据
}
}
}
ajax介绍
ajax=异步javascript和xml
ajax可以使网页实现异步更新。这意味着不重新加载整个页面的情况下，对网页 某部分进行更新。
13.png
jquery ajax请求
$.ajax (url:'后台地址',
beforeSend(){
$('.loading').show()
},
sucess:function(res){
console.log(res)
})
ajax属性
- async
async 是否异步请求，默认是true(异步)
- beforeSend
beforeSend（xhr） 发送请求前运行的函数 运用场景：loding 的处理，防止表单重复提交
例如：提交表单的时候如果遇到网络慢 ，或者其他原因，用户点击提交认为自己没有操作成功 ，进而会重复提交操作次数，这样会造成数据库中脏数据的增加。这个时候可以在这个函数中提交按钮禁止，在得到后台成功失败反馈的时候再将其释放。或者是将按钮利用节流 ，在一定时间之后才可以进行操作。防止请求一直请求中，没有反馈，按钮锁死的状态。
- cache
cache 布尔值， 表示浏览器是否缓存在被请求页面，默认是true
1.Ajax 缓存只对get方式的请求有效，而浏览器认为post 请求提交表单必定有变化。所以不走缓存
2.在默认情况下，一般发送ajaxget请求，ie浏览器第一次向服务器 端请求，获取最新数据，如果地址和参数不变，第二次及以后在发送请求。 它默认获取的缓存数据，这样的问题是ie中常见的问题，一般post原则，认为是一个变动性访问（浏览器认为post的提交必定有改变）
设置清除缓存，$.ajaxSetup({cache:false});。
当dataType 为script和jsonp时默认false ，（不使用缓存）。设置false的作用就是第一次请求完毕之后，如果再次去请求，可以不从缓存里面读取而是服务端读取，保证数据修改的时效性。
这个属性适合长期不变的数据。否则数据展示的可能是错误的
4.complete
complete(xhr,status)
返回的参数： XMLHttpRequest 对象和一个描述请求类型状态的字符串。
请求完成时运行（在请求成功和失败都会执行，但是在success和error函数之后）
status 状态值 ：success"、 "notmodified"、"nocontent"、"error"、"timeout（超时）"、 "abort"、"parsererror"
主要的作用是什么
1.可以做超时处理
var ajaxTimeoutTest = $.ajax({
url:'', //请求的URL
timeout : 1000, //超时时间设置，单位毫秒
type : 'get', //请求方式，get或post
data :{}, //请求所传参数，json格式
dataType:'json',//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
ajaxTimeoutTest.abort();
alert("超时");
}
}
});
jquery中各个事件执行顺序如下：
1.ajaxStart(全局事件)
2.beforeSend
3.ajaxSend(全局事件)
4.success
5.ajaxSuccess(全局事件)
6.error
7.ajaxError (全局事件)
8.complete
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)
5.contentType
contentType :默认application/x-www-form-urlencoded 代表使用表单形式提交。
发送信息至服务器内容编码类型
"Content-Type": "application/x-www-form-urlencoded" // 适用于大部分情况 只提交简单类型的json类型 ，当json数据复杂时就要用下面的这种格式
"Content-Type": "application/json" //适用于复杂JSON数据的提交 data 转一下
$.ajax({
type: "POST",
url: "${webRoot}/ggzy/ggzyZhzfkController.do?flfgNameQuery",
contentType: "application/json", //必须有
dataType: "json", //表示返回值类型，不必须
data: JSON.stringify({'ids': '1'}),
success: function (jsonResult) {
alert(jsonResult);
}
});
"Content-Type": "multipart/form-data" // 适用于文件上传
总结：当使用application/x-www-form-urlencoded时其实JSP会默认把我们的json数据
认为是一个对象，而使用application/json时需要向后台传入一个JSON字符串，所以
要用JSON.stringify函数把JSON对象转成json字符串。
form表单中加入enctype = “multipart/form-data 才能让服务器 正确的解析文件，否则就是设置content-type:'mutipart/form-data'
6.context
context
这个对象用于设置ajax相关回调函数的上下文。
如果设置了content，这样就设置了success回调函数的上下文为这个dom 元素。
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
7.data
data 类型string
发送给服务器的数据将自动转换成字符串格式。
默认不序列化对象， 将直接以data的形式传入。
如果设置processData false data序列化 即可传输储存的状态 。
默认是true 不序列化data
8.dataFilter
dataFilter 类型 函数 数据过滤器
给ajax返回的原始数据进行预处理函数 返回两个参数
dataFilter(data,type){
//data 就是ajax返回的daata
//type 是 datatype 设置的值
}
可以在当用户session失效时使用ajax请求时，可以使用这个函数进行是否重新跳转都登录页面（系统 的过滤器发现用户ajax请求，但用户没有登录或session时会返回字符串“timeOut”）
$.ajaxSetup({
dataFilter:function(data,type){
if(data=='timeOut'|| data=='[object XMLDocument]'){ //ajax请求，发现session过期 ，重新刷新页面 ，跳转到登录页面
window.location.reload()
}else{
return data
}
}
})
9.dataType
dataType 预期服务器返回的数据类型。如果不指定，jquery 将自动根据http包mime信息智能判断，
可设置成
xml 可用jquery 处理
html 返回纯文本html信息，包含的script 标签会 在插入dom时执行
script 返回纯文本javascript代码，不会自动缓存结果，除非cache 参数（设置缓存） 。 在远程请求时（不在同一个域下）所有post请求都将转换成为get请求
json 返回json数据
jsonp jsonp格式 使用jsonp形式调用函数时 myurl？callback=？ jquery将自动替换？为正确的函数名以执行回调函数
text 返回纯文本字符串
jsop专题 解决跨域问题
1.web页面调用js文件不受是否跨域问题的影响。（拥有src属性的标签都拥有跨域的能力，比如<script> <img> <iframe>）
2.纯web端解决跨域访问数据，就可以在远程服务器中想法将数据装进js格式文件中，仅供 客户端调用和进一步处理；
3.为了便于客户端使用数据，逐渐形成了非正式传输协议，人们称作jsonp。该协议的重点：用户传递一个callback参数给服务端，然后服务端返回数据时将这个callback参数作为函数名来包裹住json数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
纯jsonp做法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
//服务端返回的数据就是
flightHandler ({"price ":"12"，‘tickets ’，19});
以上的代码就会告诉服务器端，我想要一段调用某个函数的js代码，请你返回给我。
于是服务端就可以按照客户端的需求来生成js脚本响应了 （也就js正常调用这个callback一样）
flightHandler ({"price ":"12"，‘tickets ’，19}); 就可以执行这个方法了，你就得到你想要的数据了。就可以正常操作了。
jquery 用jsonp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://xxxx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>
上面没有在写flightHandler回调函数，是因为ajax封装了，自动生成了回调函数并把数据取出来，供sucess属性方法来调用
ajax和jsonp时两回事，两个不同的东西。ajax 的核心是通过XMLHttpRequest获取非本页内容，而jsonp的核心是动态添加<script>标签来调用服务器段提供的js脚本
jsonp和服务端代理是两回事。
用jsonp的缺点：
1.jsonp是通过动态script标签获取资源的，也就说明只能用get的方式访问资源，get以外的请求无法做到。
2.jsonp是通过src引用不同源的代码，如果其他域的代码存在恶意代码，那么将造成严重的网络安全，如果需要跨域的服务器 不足以信任，那么必须放弃jsonp
3.要确定jsonp请求是否成功， 需要启动一个计时器监测数据变动
代理服务端 安全
代理服务端解决跨域的思路是利用代理服务器对浏览器页面进行转发。因为同源策略的限制只存在浏览器中，在服务端没有这个限制，常用的代理服务器方案有使用代理服务器以及服务器内转发。
反向代理：Nginx的反向代理 ，通过修改nginx的配置文件，将指定的不同源域名代理到当前服务器上
服务器内转发：在server端对不同源的api进行转发（不推荐，如果多个用户的时候，服务压力会增大）
error 类型 function
自动判断xml和html 请求失败调用此函数
第一个参数是xmlHttprequest 第二个参数：还可能是 "timeout", "error", "notmodified(未修改)" 和 "parsererror（解析器错误）"。
global 默认true
是否触发ajax全局事件
ajax全局事件
$(document).ajaxStart(function (event) {
/*
* 每一个ajax即将发送的时候触发该事件，只有一个事件对象参数
*/
console.log('ajaxStart');
})
$(document).ajaxSend(function (event,xhr,opts,err) {
/*
* 每一个ajax即将发送的时候触发该事件
* 此方法接受四个参数，分别是事件对象，XHR对象，和发起ajax请求的配置对象,错误信息
*/
if(opts.type == 'get'){
xhr.abort();
}
})
$(document).ajaxSuccess(function (event,xhr,opts) {
/*
* 此方法接受三个参数，分别是事件对象，XHR对象，和发起ajax请求的配置对象
* 每一个ajax请求成功都会触发该事件
* 配置对象中的success回调会先执行，然后再执行这个事件
*/
console.log(JSON.parse(xhr.responseText))
})
$(document).ajaxError(function (event,xhr,opts,err) {
/*
* 此方法接受四个参数，分别是事件对象，XHR对象，和发起ajax请求的配置对象,错误信息
* 每一个ajax请求失败都会触发该事件
* 配置对象中的error回调会先执行，然后再执行这个事件
* 如果是客户端错误导致请求失败,err的值有可能是timeout,error,abort,或者是抛出错误异常对象
*/
console.log(err)
})
$(document).ajaxComplete(function (event,xhr,opts) {
/*
* 此方法接受三个参数，分别是事件对象，XHR对象，和发起ajax请求的配置对象
* 每一个ajax请求完成都会触发该事件，不管请求的结果如何
* 配置对象中的complete回调会先执行，然后再执行这个事件
*/
})
document).ajaxStop(function (event) {
/*
* 此方法只接受一个事件对象参数，此事件只触发一次
* 当所有ajax请求完成的时候调用一次，不管ajax请求的状态是失败还是成功或是被取消
*/
})
jsonp
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
jsonpCallback
为jsonp请求指定一个回调函数名。这个值来去取代jquery自动生成的随机函数名。这主要用来让jquery生成独特的函数名 自己起
例如：
$.ajax({
type: "get",
async: false,
url: "http://xxxx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
scriptCharset
只有 当请求时dataType 为jsonp 或script ，并且type 是get 才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
<script charset="value">
设置编码的
success
请求成功后的回调函数
timeout
设置请求超时时间（毫秒）
网友评论