【web前端开发】之Ajax的原理、实现步骤和实现方式

前言:ajax的知识相对比较简单，此文章仅表明鄙人的总结和理解，若有错漏，欢迎指正...

1、原理：

Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发送异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。
XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

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

那什么是同步，异步呢？
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

2、实现步骤：

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
复制代码

3、实现方式：

ajax通用调用方法

<script type="text/javascript">
            $('#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);
				}
			})
		})
        </script>
复制代码

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的知识，可参考如下博客：

面试题 —— Ajax的基本原理总结
总结 - Ajax工做原理和实现步骤

---

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