AJAX异步请求

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来请求
		}
	}
})