整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在所有主流的网站，基本上都用到了ajax技术，通过异步请求数据已经是一个很普及的实现方式。市面上主流的web前端框架也都有自己封装的ajax，而且都是大同小异的。也就是说，Ajax这个轮子已经是多的不能再多了，那为什么我们还要自己封装一个Ajax呢？
想要了解一个技术或者某个功能的实现原理，只有动手实践才能真正的了解。就如我在csdn上第一篇博客的博文描述。探索技术的路上本应该自己造轮子，即使市面上有再多的选择，自己动手尝试也是必要的，第一次尝试必然会问题众多，但你不觉得解决他是一件很有成就感的事情吗，这样才能带给你更大的进步和更深刻的领悟。
废话不说，先来写一个最基础的ajax：
[javascript] view plain copy
一个ajax出炉了，通过调用、填写参数即可请求到服务器。先来分析一下这个ajax的结构，可以看得出来，其实很简单，只是new了一个XMLHttpRequest对象，然后通过onreadystatechange方法来处理返回值，现在我们只是做了一个判断，当请求成功时就调用success方法，如果请求失败，我们还没有写上去，后面我们慢慢完善这个ajax的逻辑。
然后调用ajax的open方法，open方法里有三个参数，第一个是请求方式（如：get或post），第二个是请求的url地址，第三个是一个bool值，是否要异步请求。
最后使用send方法带上参数发送请求即可。
这是，我的服务器已经收到一个请求，但他报了404错误，也就是找不到对应的页面或路由，这时success方法也不会被调用执行。
那我们再来完善一下这个新生的ajax。我们只需要在onreadystatechange方法里增加一个条件，当请求不成功时调用自身的error方法：
[javascript] view plain copy
这样我们就可以在ajax请求的时候加上error方法，当ajax请求失败的时候执行我们想要执行的操作。现在我们抛除跨域请求的问题，当你发送post请求时，你会发现后台接收不到传过来的参数，调用如下：
[javascript] view plain copy
后端打印一下传过来的参数，为空。
出现这个问题的原因主要是请求头没有声明，这时候我们需要初始化声明一下请求头，那我们加入一行代码：
[javascript] view plain copy
设置Conten-type为application/x-www-form-urlencoded，现在后端应该是已经可以收到参数了。那我们现在的ajax调用时实在太繁琐，有些东西我们不想填的我们应该给他设置一个默认值，不然就会报错。
比如error方法、method、还有是否异步的bool值等等。那我们再加入一些默认值，现在的ajax是这样的：
[javascript] view plain copy
现在的ajax还存在一个问题，在post请求的时候，如果我们要传参，是需要通过字符串传参的。那这种的书写规则并不是很友好的：
[javascript] view plain copy
而一般框架的传参都是通过json的格式来输入的，我们也不能偏离大众习惯搞独立，当然我们也要保留字符串的传参方式，只是要扩展功能。
那我们需要加一个控制格式的参数，我们这里用dataType这个参数来控制传参格式，默认是字符串格式传参好了，可以选择json格式进行传参即可。如果是json格式传参，我们需要把json转化成字符串类型，代码如下：
[javascript] view plain copy
这样，我们的ajax也就可以通过json格式进行传参了。现在的ajax完整代码和调用方式如下：
[javascript] view plain copy
现在这个Ajax基本上已经可以满足业务上的所以需求，不过还有一点没有实现，我们的Ajax不能设置请求头？！为了一些特殊需求的情况下，我们还是要把这一功能加上的：
[javascript] view plain copy
现在的完整代码入下：
[javascript] view plain copy
完整示例代码文件：JavaScript封装Ajax完整示例代码
AJAX 是一个缩写，它的全名是 Asynchronous JavaScript and XML，意思就是异步 JavaScript 和 XML，即用JavaScript执行异步网络请求。
AJAX 不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:
尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势，比如更加轻量以及作为 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
AJAX 通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
其工作原理基本经过以下几个步骤：
根据 AJAX 的工作原理，它的创建步骤主要包括：
以下是 使用 AJAX 的完整流程。
const request = new XMLHttpRequest();创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下：
request.open(method, url, async, user, password);参数解析：
创建完 HTTP 请求之后，应该就可以将 HTTP 请求发送给 Web 服务器了。然而，发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始，到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态：
总的来说，readyState 属性的值有以下几种：
只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status 的值为 0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0：
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0
xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1
xhr.onprogress = function () {
console.log('LOADING', xhr.readyState); // readyState 为 3
};
xhr.onload = function () {
console.log('DONE', xhr.readyState); // readyState 为 4
};
xhr.send(null);只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态：
const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// do something here
}
}XMLHttpRequest.send(data);最后，附上一个简单的完整 AJAX 实例：
<button id="ajaxButton" type="button">Make a request</button>
<script>
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>~
~
~ 本文完
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
JAX 是一种与服务器交换数据的技术，可以在补充在整个页面的情况下更新网页的一部分。接下来通过本文给大家介绍ajax一些常用方法，大家有需要可以一起学习。
1.url:
要求为String类型的参数，(默认为当前页地址)发送请求的地址。
2.type:
要求为String类型的参数，请求方式(post或get)默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true(当dataType为script时，默认为false)，设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下)，所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数(请求成功或失败时均调用)。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
10.success：
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码：
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
*请认真填写需求信息，我们会在24小时内与您取得联系。
