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

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

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

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

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

那什么是同步，异步呢？

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

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

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

二、实现步骤：
get 请求

1. 创建一个XMLHttpRequest对象
2. 调用该对象的open方法
3. 如果是get请求，设置回调函数onreadystatechange = callback
4. Send
   复制代码
   post 请求
5. 创建一个XMLHttpRequest对象
6. 调用该对象的open方法
7. 调用setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
8. 设置回调函数onreadystatechange = callback
9. Send
   复制代码
   三、实现方式：
   ajax通用调用方法

复制代码
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);
});
});
复制代码
我目前是在职前端开发，如果你现在也想学习前端开发技术， 在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题， 你都可以申请加入我的前端学习群：1017810018里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题， 前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。