一.解释:
--------------------------------------------------------------------------------------------------------------------------------------------------------------
ajax是通过http请求获取资源(数据)的一种技术。
http是一种无记忆的请求,请求结束后不会保留请求的记忆。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
二、ajax请求大致过程:
--------------------------------------------------------------------------------------------------------------------------------------------------------------
发送ajax请求 ----> 服务器响应 ----> 返回响应“数据”、"服务器请求响应代码"
1. ajax发送请求的“方法”常用有两种:
get方式,post方式 (还有:HEAD、PUT、DELETE、OPTIONS...)
2. “服务器响”应返回响应“数据”类型通常有以下几种:
responseText 字符串、XML、html、json、js、jsonp
3. “服务器响应”返回响应http代码常见有以下几种:
200,401,404,501,503........
三、js中的ajax跨域:
3.1 js因为了资源的“安全”采用“同源策略”:
同一服务器、域名、端口,上的ajax只能访问同一服务器、域名、端口上的资源(数据);
3.2 html有下下标签可以实现跨域:
img ,link, iframe, script , href ...
注:说白了,要实现跨域就是我的服务器可以访问别人服务器上的资源(数据)。
要注意是的,别人服务器如果写了安全方面的代码,可能会禁止跨域。
也就说,小明想要拿到小白家的东西,要经过小白同意。
当然走后门也可以不经过小白同意,这是安全问题我们不作说明。
--------------------------------------------------------------------------------------------------------------------------------------------------------------
四、原生js中的ajax代码:
--------------------------------------------------------------------------------------------------------------------------------------------------------------
3.1 非跨域情况下通过ajax请求数据
| GET方法 |
-------------
var ajaxObj = null; //创建ajax对象
if( window.XMLHttpRequest ){ //ajax对象浏览器兼容
ajaxObj = new XMLHttpRequest();
} else{
ajaxObj = new ActiveXOBject("Microsoft.XMLHTTP");
}
ajaxObj.open( ‘get‘,‘http://www.***.com/data.json‘, true);
// get方法,请求url数据地址,true为异步请求(默认true,false为同步请求)
ajaxObj.send(null) //要发送的数据
ajaxObj.onreadystatechange = function(){
if(ajaxObj.readyState ==4 && ajaxObj.status == 200){
console.log( ajaxObj.responseText );
//拼接HTML字符串,把数据插入到时HTML字符串,操作DOM显示在页面中
}
}
注:get方法发送数据通过Url传送,拼接字符串
http://www.***.com/data.json?name = zhangsan&age=23
| post方法 |
-------------
var ajaxObj = null; //创建ajax对象
if( window.XMLHttpRequest ){ //ajax对象浏览器兼容
ajaxObj = new XMLHttpRequest();
} else{
ajaxObj = new ActiveXOBject("Microsoft.XMLHTTP");
}
ajaxObj.open( ‘post‘,‘http://www.***.com/data.json‘, true);
// get方法,请求url数据地址,true为异步请求(默认true,false为同步请求)
ajaxObj.send( 这里写要发送的数据 ) //要发送的数据
ajaxObj.onreadystatechange = function(){
if(ajaxObj.readyState ==4 && ajaxObj.status == 200){
console.log( ajaxObj.responseText )
//拼接HTML字符串,把数据插入到时HTML字符串,操作DOM显示在页面中
}
}
注:post方法发送数据通过http头进行传送
ajaxObj.send( sendData )
var sendData = {
name: ‘‘zhangsan",
age : 23
}
3.2 跨域情况下通过ajax请求数据
3.2.1 常用script 标签跨域 Jsonp
<script>
function callback( backData ){
// 一定要注意,要求后台返回数据:是这样的形式 callback( ‘这里写返回的数据‘ ) ,不然就会出错
console.log( backData )
// 这里就是返回的数据,用js相应方法把返回的数据进行处理
// 如果返回字符串,可以用eval( ‘(‘+ backData+‘)‘)、JSON.parse( backData)方法处理成对象
// 拼接HTML字符串,把数据插入到时HTML字符串,操作DOM显示在页面中
}
</script>
<script src="这里写要跨域的Url地址"></script>
// 这里写要跨域的Url地址"要求后台返回数据:是这样的形式 callback( ‘这里写返回的数据‘ ) ,不然就会出错
注:可以动态的在<head>标签中添加<script>标签进行跨域
五、jQuery中的ajax代码:
--------------------------------------------------------------------------------------------------------------------------------------------------------------
$.ajax({
type : ‘get‘,
async : true,
cache : true,
data : {
name: ‘zhangsan‘,
age : 23
} ,
contentType : "application/x-www-form-urlencoded" , //默认值 //发送信息至服务器时内容编码类型
dataType : ‘json‘ ,
url : "",
success : function( backData ){
}
})