一、Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的创新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript在浏览器上执行。
XMLHttpRequest 只是实现 Ajax 的一种方式。

二、同步与异步

同步：发送⼀个请求，需要等待响应返回，然后才能够发送下⼀个请求，如果该请求没有响应，不能发送下⼀个请求，客户端会处于⼀直等待过程中。

异步：发送⼀个请求，不需要等待响应返回，随时可以再发送下⼀个请求，即不需要等待。

三、实现Ajax

1. 原生JS实现

实现步骤：
1、定义⼀个XMLHttpRequest核⼼对象xhr;
2、通过xhr.open⽅法给当前对象提供访问⽅式、URL等。
3、发送当前的请求⾄指定的URL
4、接收返回值并处理

案例：前台⻚⾯通过⼀个按钮向后台发送⼀个Ajax请求，后台做完处理后向前台⻚⾯响应⼀段⽂本信息显示在⻚⾯上

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">function testJsAjax(){//1. 创建核⼼对象var xmlhttp = new XMLHttpRequest();//2.通过核⼼对象⽅法给当前的对象提供访问⽅式和URL路径xmlhttp.open("GET","http://localhost/getmsg",true);//3.发送当前的请求⾄指定的URLxmlhttp.send();//4.接收返回值并处理xmlhttp.onreadystatechange=function(){//xmlhttp.readyState==4代表XMLHttpRequest对象读取服务器的响应结束//xmlhttp.status==200响应成功if (xmlhttp.readyState==4 && xmlhttp.status==200){var msg = xmlhttp.responseText;document.getElementById("msg").innerHTML=msg;}}}
</script>
</head> <body> <div id="msg"></div> <input type="button" name="btn" value="JS原⽣⽅式实现异步" οnclick="testJsAjax()">
</body>
</html>

2.JQuery实现

JS版的Ajax仅做为了解，我们重点学习jQuery版的Ajax，jQuery是⼀个优秀的js框架，⾃然对JS原⽣的Ajax进⾏了封装，封装后的Ajax的操作⽅法更简洁，功能更强⼤，这也是程序员最普遍使⽤，语法结构简单，代码可读性好。

与Ajax操作相关的jQuery⽅法经常使⽤的有三种：

2.1 ajax请求

$.ajax({url:"",data:{},type:"post/get",async:true,dataType:"text",success:function(obj){},error:function(){}
})

注意事项：

每个属性后都要跟随⼀个英⽂逗号，最后⼀个不⽤。

每⼀个属性都是键值对的形式存在，中间⽤英⽂冒号:隔开

data:{} 是⼀个特殊的写法，值是⼀个{}，⾥⾯使⽤键值对存储
例如：data:{“键1”:值1, “键2”:值2, “键3”:值3}

以上属性没有先后顺序要求

2.2 get请求

$.get(URL,data,function(data,status,xhr),dataType)

参数	含义
URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的回调函数。额外的参数： data 包含来自请求的结果数据" status 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”） xhr 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型： “xml” - 一个 XML 文档 “html” - HTML 作为纯文本 “text” - 纯文本字符串 “script” - 以 JavaScript 运行响应，并以纯文本返回 “json” - 以 JSON 运行响应，并以 JavaScript 对象返回 “jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

注意事项：

这种写法功能和$.ajax是⼀样的，但是严格要求属性顺序。

实例：
请求 “/try/ajax/test.php”，但是忽略返回结果：

$.get("/try/ajax/test.php");

请求 “/try/ajax/test.php” 并连同请求发送一些额外的数据（忽略返回结果）：

$.get("/try/ajax/test.php", { name:"Donald", town:"Ducktown" });

请求 “/try/ajax/test.php” 并传递数据数组到服务器（忽略返回结果）：

$.get("/try/ajax/test.php", { 'colors[]' : ["Red","Green","Blue"] });

请求 “/try/ajax/test.php” 并提醒请求的结果：

$.get("/try/ajax/test.php", function(data){alert("Data: " + data);
});

2.3 post请求

$(selector).post(URL,data,function(data,status,xhr),dataType)

实例：使用 AJAX 的 POST 请求来改变div元素的文本

$.post("demo_ajax_gethint.html",{suggest:txt},function(result){$("span").html(result);
});

参考资料：

CSDN博主「PIKapikaaaa」https://blog.csdn.net/PIKapikaaaa/article/details/124914380

菜鸟教程 AJAX 教程 https://www.runoob.com/ajax/ajax-tutorial.html

Ajax？阿贾克斯？相关推荐

jQuery ajax - ajax阿贾克斯 Get()和Post()方法请求用法整理
2020年10月29日上午11:47:41 原文链接:http://note.youdao.com/noteshare?id=cb8e02bcbdfdd95a0cf84fc61d486ac5& ...
ajax阿贾克斯2019阵容,记住阿贾克斯2019的孩子们！他们杀死皇马尤文这毕业季真痛...
腾讯体育5月9日讯离欧冠决赛仅有一步之遥!被热刺读秒绝杀,阿贾克斯最终还是无缘决赛,但是这支青年之师,已经足以令人对其肃然起敬.贾府的美名在本季欧冠必然将成为佳话流传于足史. 综合两场的表现来看,实 ...
ajax阿贾克斯赞助商,阿贾克斯（AJAX）(示例代码)
AJAX :Asynchronous JavaScript and XML异步的javascript和xml 优点 : 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分数据不需要任何 ...
ajax (阿贾克斯)----------- js 向后端索要数据的方式(技术)
ajax + js 向后端索要数据的方式(技术) 基本步骤 1. 创建ajax 对象 const xhr = new XMLHttpRequest() 2. 配置本次的请求信息 xhr.open(请 ...
ajax，HTTP原理 : 网络传输协议，网页从输入url到渲染的流程，函数防抖和节流
一. 前后端交互流程 1.服务器 : 提供某种服务器的机器(计算机) qq音乐:音频服务器 , 迅雷:文件服务器 , qq邮箱:邮件服务器,爱奇艺:视频服务器,谷歌:web服务器 2. 前端访问服 ...
Ajax 详解网页从输入url到渲染的流程同步异步你想要的全都有
1 前后端交互流程 1.1 了解服务器提供某种服务器的机器(计算机) 1.2 了解前端访问服务器的几种方式直接在地址栏输入网址网页 ...
文件不能断点 webstorm_详解python使用金山词霸的翻译功能(调试工具断点的使用)...
这篇文章主要介绍了详解python使用金山词霸的翻译功能(调试工具断点的使用),本文给大家介绍得非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下今天试着用python获取金山 ...
2016年世界编程大赛_在2016年学习的最佳编程语言是什么？
2016年世界编程大赛 Craig's Best Programming Language to Learn in 2015 article was a huge hit, and in this a ...
java web学习笔记（持续更新）
java web学习笔记一.Java Web简介二.认识Servlet 1.什么是Servlet? 2.请求路径 3.tomcat 4.Servlet的使用三.Servlet简单应用 1.创建S ...
【微信小程序】理论学习笔记
来源:慕课视频<微信小程序开发>&黑马课程小程序基础了解微信小程序框架逻辑层–JavaScript.处理业务逻辑视图层-视图样式WXSS.视图层描述语言WXML.渲染页面 ...

Ajax？阿贾克斯？