ajax基础用法

2016-11-20 21:04:26来源:CSDN作者:qq_34134278人点击

AJAX--------异步交互
    *客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做别的事情;
*使用ajax可以在不刷新页面的情况下与服务器进行交互从而更新页面内容;
*创建ajax四个步骤:
* 创建XMLHttpRequest对象
* 注册监听
* 建立连接
* 发送请求
*原生js创建ajax (get方式)(实际使用中建议用jQuery创建ajax)
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url);
xmlhttp.send();
}

*jQuery创建ajax(详细)
get与post在使用中的区别:
* get请求类型
*send()方法不起作用,但是不能被省略
* 请求参数 - 添加到URL?key=value
* POST请求类型
* send()方法起作用
* 在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

* $.ajax() 封装第一层,最复杂;
*$.ajax({
url:"", 
type:"",
data:{key:value},
dataType:"json",
success:function(data,textStatus){},
error:function(XMLHttpRequest,textStatus,errorThrown){}
})

以上为常用参数,各参数意义分别为
{* url - 请求参数//
* type - 请求类型(默认get)//
* data - 请求数据(key:value形式)//
* dataType - 响应数据格式(一般为json,html,xml格式, 跨域改为jsonp)//
* success - 请求成功后的回调函数(响应数据内容, 请求状态)//
* error - 请求失败后的回调函数(Ajax核心对象, 请求状态(error,timeout,notmodified等), 抛出异常)
}


* $().load() $.get() $.post() 封装第二层,(后两个常用);
*$().load(url,data,callback){} 
* 参数
* url - 当前Ajax的请求地址
* data - 当前Ajax的请求数据(key:value)
* callback - 请求成功后的回调函数( 形参(data) -服务器端响应的数据内容 )
*$.get(url,data,callback,type) - 请求类型是GET
* 参数
* url - Ajax的请求地址
* data - Ajax的请求数据((key:value))
* callback - Ajax请求成功后的回调函数( 形参(data) -服务器端响应的数据内容 )
* type - 设置服务器端响应数据的格式
* HTML格式 (默认)
* xml - XML格式
* json - JSON格式 (一般常用)
* $.post() - 请求类型是POST(使用方式与$.get()方法一致)

* $.getScript() $.getJSON()  封装第三层 (特殊用法)
*$.getScript(url,callback) - 动态读取脚本(JavaScript代码)
* url - 读取脚本的地址(本地或服务器)
* callback - 读取成功后的回调函数

* $.getJSON() - 接收JSON格式数据(用于跨域)

楼主目前还是新手,文章有什么不足或者需要改进的地方,希望大家留言提出。希望这篇文章对大家有用。

下一篇写关于跨域的文章

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台