ajax的异步原理和执行过程,【web前端开发】之Ajax的原理、实现步骤和实现方式...

一、原理：

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

说人话就是：“HTTP协议的异步通信”。

那什么是同步，异步呢？

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

二、实现步骤：

get 请求

1) 创建一个XMLHttpRequest对象

2) 调用该对象的open方法

3) 如果是get请求，设置回调函数onreadystatechange = callback

4) Send

复制代码

post 请求

1) 创建一个XMLHttpRequest对象

2) 调用该对象的open方法

3) 调用setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

4) 设置回调函数onreadystatechange = callback

5) Send

复制代码

三、实现方式：

ajax通用调用方法

$('#bid').click(function(){

$.ajax({

url:'3.query.php',//地址

dataType:'json',//数据类型

type:'GET',//类型

timeout:2000,//超时

//请求成功

success:function(data,status){

//alert(data);

//alert(status);

},

//失败/超时

error:function(XMLHttpRequest,textStatus,errorThrown){

if(textStatus==='timeout'){

alert('请求超时');

setTimeout(function(){

alert('重新请求');

},2000);

}

//alert(errorThrown);

}

})

})

复制代码

jQuery - AJAX get() 方法

语法：

$.get(URL,callback);

复制代码

例子：

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

复制代码

jQuery - AJAX post() 方法

语法：

$.post(URL,data,callback);

复制代码

例子：

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

复制代码

想要了解更多关于ajax的知识，可参考以下博客：

结语：以往都是看别人的博客进行学习技术，其中不乏有精华博客也有吊儿郎当的CV大法文章，所以决定将自己所学所用所整理的知识分享给大家，主要还是想为了后浪们少走些弯路，多些正能量的博客，如有错漏，欢迎指正，仅希望大家能在我的博客中学到知识，解决到问题，那么就足够了。谢谢大家！(转载请注明原文出处)