AJAX简介
AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX=异步JavaScript和XML。
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
原生AJAX
1.创建AJAX实例
var xmlhttp;
if (window.XMLHttpRequest)
{
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
//code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
如果不面向版本较老的浏览器,代码如下:
var xmlhttp=new XMLHttpRequest();
2.向服务器发送请求
open(method,url,async):规定请求的类型、URL以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步
send(string):将请求发送到服务器。
string:仅用于 POST 请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
3.服务器响应
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
当请求被发送到服务器时,我们需要执行一些基于响应的任务
onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
readyState:存有XMLHttpRequest的状态。从0到4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
status:200:"OK"
404:未找到页面
//每当readyState改变时,就会触发onreadystatechange事件
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
完整代码
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
JQuery发送AJAX
$('#btn').click(function(){
var obj={
type:'get', //请求方式
url:'https://autumnfish.cn/api/joke/list', //请求的后台路径
data:{"num":"1"}, //请求携带的参数
// 后台响应成功后的回调函数
// resp是一个JSON对象,可通过键名取出对应的值
success:function(resp){
alert(resp);
alert(resp.msg);
},
// 请求失败的回调函数
error:function(){
alert("出错")
},
// 设置接收到的响应数据的格式
dataType:"json"
}
// 发送Ajax请求,需要传入参数,请求的参数对象
$.ajax(obj);
})
Vue发送Ajax
/* Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用axios来完成ajax请求。 */
new Vue({
el: '#box',
data: {
},
methods: {
// 发送get请求
sendAjax: function() {
// 格式:this.$http.get(后台地址,{提交的数据}).then(请求成功后的处理函数,请求失败的处理函数)
// this代表Vue实例对象,then代表执行请求之后的回调函数
// 测试接口:https://autumnfish.cn/api/joke/list?num=1
// params(Object):作为URL参数的参数对象;如果采用拼串的形式来传入参数,不需要params这个参数
this.$http.get('https://autumnfish.cn/api/joke/list', {
params: {
num: 1
}
}).then(function(res) {
// body:作为请求体发送的数据,res.body是一个JSON对象
alert(res.body);
alert(res.body.msg);
}, function(res) {
console.log(res.status);
});
/* 发送 post 请求
emulateJSON: true用于声明给后台提交的参数是JSON字符串形式
this.$http.post('/try/ajax/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"
}, {
emulateJSON: true
}).then(function(res) {
document.write(res.body);
}, function(res) {
console.log(res.status);
}); */
// 如果后台没有进行cross跨域处理,就得通过JSONP来请求
}
}
})