本文讲述在前端开发过程中涉及到网络数据请求时候的相关内容。以Ajax请求为中心进行展开。
首先、简单的介绍一下什么是Ajax、以及为什么要使用他。
Ajax： Asynchronous JavaScript and XML，简言之就是异步 JavaScript 和 XML。
他可以通过和服务器的交互实现网页中部分信息的更新，这就使得我们在只需要进行少数数据更新的情况下，避免整个网页数据的再次加载，提升了开发性能。
举个例子就是说；现在你要注册一个网站，成为正式用户，然后有一大堆的信息录入表等你填写，这个时候你已经填了好多内容了，有个地方需要你输入验证码，然后呢，你表示看不清楚想要换一张验证码，这个时候，如果用普通的数据刷新请求方式去处理获取新的验证码的话，随之而来的问题就是，验证码虽然刷新了，但是你之前好不容易填写的一堆个人信息也被刷新了，没了，是不是很无语，所以，这种情况下，我们就需要使用Ajax这种部分内容刷新的请求方式去进行数据请求，从而达到更加高效快捷的更新网页内容的效果。
那么、接下来我们就来看看具体的在代码中该如何书写请求。
1.关于适用原生的Ajax进行数据请求。
<button onclick="getDataByAjax()">点击请求数据</button>
<div id="myDiv"></div>
<script type="text/javascript">
function getDataByAjax() {
var xmlHttp;
// 设置浏览器兼容－创建 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
// 设置请求类型(get/post), url, 以及是否为异步请求async
xmlHttp.open("GET", "你的请求路径－url", true);
xmlHttp.send(); // 发送请求
}
</script>
以上就是通过原生方式进行Ajax请求数据的方法，其中：
readyState: 存有 XMLHttpRequest 的状态。他有0-4五种取值。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成、且响应已就绪。
status: 响应状态码（200表示成功，404表示页面未找到）
2.jQuery中使用Ajax请求数据。
$.ajax({
type: "get", // 请求类型（get/post）
url: "你的请求路径－url",
async: true, // 是否异步
dataType: "json", // 设置数据类型
success: function (data){
// 请求成功后的回调方法，进行数据赋值、显示等操作
},
error: function (errorMsg){
// 请求失败
alert("请求失败");
}
});
以上就是jQuery中使用Ajax进行数据请求的方式，相比于第一种而言，很显然简洁了许多，但是需要主要dataType这个参数的设置需要和你请求的数据的类型保持一致。
希望我的文章能对大家有所帮助，以上内容，如有不对或不足之处，还望大神不吝指正，十分感谢！
我是姣爷，我在简书，加油。
