提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
使用ajax可以实现网页局部刷新，接下来我将介绍原生JavaScript与jQuery中的ajax使用方法。
一、原生JavaScript中的Ajax
原生创建Ajax的步骤：
1.创建Ajax对象:
//老版本的IE5和6
var oAjax = newActiveXObject("Microsoft.XMLHTT")
//其他浏览器
var oAjax = new XMLHttpRequest();
2.连接到服务器
3.发送请求
//初始化请求
open(method, url, asynch)
method：请求类型，类似“GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。
url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径
asynch：表示请求是否要异步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
send(data)
open 方法定义了Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
data：将要传递给服务器的字符串。
若选用的是GET 请求，则不会发送任何数据，给send 方法传递null 即可：request.send(null);
4.接收返回值
readyState
◆readyState属性表示Ajax请求的当前状态。它的值用数字代表。
❑0 代表未初始化。还没有调用open 方法
❑1 代表正在加载。open 方法已被调用，但send 方法还没有被调用
❑2 代表已加载完毕。send 已被调用。请求已经开始
❑3 代表交互中。服务器正在发送响应
❑4 代表完成。响应发送完毕
◆每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。
◆readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4
status
◆服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
◆常用状态码及其含义：
❑404 没找到页面(not found)
❑403 禁止访问(forbidden)
❑500 内部服务器出错(internal service error)
❑200 一切正常(ok)
❑304 没有被修改(not modified)
◆在XMLHttpRequest对象中，服务器发送的状态码都保存在status 属性里。通过把这个值和200 或304 比较，可以确保服务器是否已发送了一个成功的响应
responseText
◆XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
◆当readyState属性值变成4 时, responseText属性才可用，表明Ajax 请求已经结束。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原始的ajax</title>
<script>
window.onload=function(){
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
//1.创建XMLHttpRequest对象
//考虑ie浏览器的兼容问题
if(window.XMLHttpRequest){
//ie7以上 火狐 谷歌 苹果 欧朋
var oAjax=new XMLHttpRequest();
}else{
//ie6 ie5
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.对发送请求进行初始化，调用open方法
//open("请求方式","请求地址","同步（false）异步(true)")
oAjax.open("GET","js/ddd.txt",true);
//3.发送请求
oAjax.send();
//4.为XMLHttpRequest添加onreadystatechange时间
/**
* 当服务器信息返回过来的时候调用,每个请求状态都会自动触发这个事件
*/
oAjax.onreadystatechange=function(){
//onreadystatechange于服务器发生交互时，触发这个事件
//咱们可以根据状态码来确定服务器有没有发送过来内容
//readystate：告诉我们浏览器和服务器进行到哪一步了
/**
* 0：初始化
* 1：服务器已经建立连接（执行完open方法了）
* 2：请求已被接受（执行完send方法了）
* 3：请求处理中
* 4：请求完成，响应就绪
*
* status
* 200 404 500
*/
//5.判断有没有发送完成
if(oAjax.readyState==4){
//6.判断是否响应完成
if(oAjax.status==200){
//7.打印响应内容
//responseText:获取响应的文本内容
alert("请求响应成功："+oAjax.responseText);
}else{
alert("请求失败："+oAjax.status);
}
}
}
}
}
</script>
</head>
<body>
<button id="btn1">提前内容</button>
</body>
</html>
二、jQuery中的Ajax
1.$.ajax() 方法
$.ajax()是jQuery中的最底层的方法,该方法只有一个参数，但是这个对象里面包括了该方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选，常用参数为：
➢url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
➢type: 要求为String类型的参数，请求方式（post或get）默认为get。
➢data: 要求为Object或String类型的参数，发送到服务器的数据。
➢dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。重要参数json：返回JSON数据。
➢async：类型：Boolean。默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
➢contentType：默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。重要参数：“application/json“ json格式传输
➢complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。➢success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。(1)由服务器返回，并根据dataType参数进行处理后的数据。(2)描述状态的字符串。
➢error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax方法</title>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
/**
* jquery调用ajax方法 常用的写法
* 格式$.ajax({})
* 参数：
* type：请求方式 get/pot
* url:请求的地址
* data:请求时发送给服务器的数据
* dataType:预期服务器返回的数据类型
* async:是否是异步，如果是false就是同步，如果是true就是异步，默认是异步
* contentType:设置请求头
* success：请求成功后调用此函数
* error：请求失败后调用此函数
*/
$(function(){
// //给按钮绑定一个点击事件
// $("#btn1").click(function(){
// $.ajax({
// type:"get",//请求方式
// url:"js/data.txt",//请求地址
// data:{//请求的数据，json对象
// username:"zhangsan"//如果没有请求参数，不需要加
// },
// //请求成功以后调用的回调函数
// success:function(data){//data是一个形参，代表的是服务响应过来的数据
//
// //怎么把字符串转成json
// var obj=JSON.parse(data)
// console.log(obj);
// }
// })
// })
//给按钮绑定一个点击事件
$("#btn1").click(function(){
$.ajax({
type:"get",//请求方式
url:"js/data.txt",//请求地址
data:{//请求的数据，json对象
username:"zhangsan"//如果没有请求参数，不需要加
},
//预期服务器返回的数据类型，在接受服务器返回值的时候会自动封装成json类型的
//前提是返回的格式必须是json格式
dataType:"json",//
//请求成功以后调用的回调函数
success:function(data){//data是一个形参，代表的是服务响应过来的数据
// console.log(data);
var $ul=$("<ul></ul>");//创建一个ul元素节点
//遍历返回的数据数组
for(var i=0;i<data.length;i++){
//得数组中每一个元素
var user=data[i];
//创建li,把每个元素的username添加到li里面
var li="<li>"+user.userName+"</li>";
//把li添加到ul中
$ul.append(li);
}
//讲ul添加到body里面
$("body").append($ul);
}
})
})
})
</script>
</head>
<body>
<button id="btn1">获取值</button>
</body>
</html>
2.$.get() 方法
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>get请求</title>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
/**
* $.get("请求地址"，"请求参数列表","回调函数"，"预计服务器返回的数据格式")
* $.post("请求地址"，"请求参数列表","回调函数"，"预计服务器返回的数据格式")
*/
$(function(){
$("#btn1").click(function(){
$.get("js/data.txt",{},function(data){
var $ul=$("<ul></ul>");//创建一个ul元素节点
//遍历返回的数据数组
for(var i=0;i<data.length;i++){
//得数组中每一个元素
var user=data[i];
//创建li,把每个元素的username添加到li里面
var li="<li>"+user.userName+"</li>";
//把li添加到ul中
$ul.append(li);
}
//讲ul添加到body里面
$("body").append($ul);
},"json")
})
})
</script>
</head>
<body>
<button id="btn1">get</button>
</body>
</html>
3.$.post() 方法
基本语法：
$.post(URL,data,callback)
URL：请求路径
data：请求中发给服务器的数据
callback：回调函数
基本用法与get方法类似。
代码示例留到以后再补充。
3544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
