JavaScript中的ajax
Posted 黄文超
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中的ajax相关的知识，希望对你有一定的参考价值。
JavaScript中的ajax是何物？
一.解释：
--------------------------------------------------------------------------------------------------------------------------------------------------------------
ajax是通过http请求获取资源（数据）的一种技术。
http是一种无记忆的请求，请求结束后不会保留请求的记忆。
二、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 ){
}
})
以上是关于JavaScript中的ajax的主要内容，如果未能解决你的问题，请参考以下文章