Ajax 知识入门从这里开始【简约版，后期重新归纳整理】
- 2019 年 10 月 10 日
- 筆記
基本概念
Ajax(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML
什么是异步呢？
异步和同步往往是同时被提到的两个概念，这两者都是基于客户端和服务器端相互通信的基础上
- 同步：客户端必须的等待服务器端给予的响应，在此期间不能进行其他操作
- 异步：与同步不同，客户端不需要等待服务器响应，在此期间可以进行任何操作
简单概述流程：
同步：发送请求 → 等待服务器处理 → 返回
异步：事件触发 → 服务器处理 （不等待）→ 处理结束
好处
Ajax 就是一种可以在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯
往简单了说就是：不用刷新整个网页，就能修改网页局部内容
在之前的开发中，如果每一次局部的小修改都进行页面刷新，这显然对性能会有所降低，而且用户正在执行的操作也会中断
基本流程
上面图片中基本上所有内容我们都是有一定认识的，只有 XMLHttpRequest 我们似乎是第一次见，那么这又是什么呢？
XMLHttpRequest 是Ajax的核心，是一个非常重要的对象，我们下面的程序中会反复的用到
XMLHttpRequest 基本原理
Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装，然后再发送到服务器，接着服务器以流的形式将数据返回给浏览器
也正是因为服务器返回的数据是通过流的形式发送的，XMLHttpRequest对象会不停的监听服务器，且得到服务器数据，所以浏览器不需要刷新就可以获取服务器端的数据
基本实现
JS实现方式（了解即可）
1、创建核心对象
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2、建立连接
xmlhttp.open("GET","ajaxServlet?username=tom",true);
- 参数1：请求方式（Get、Post）
- get：请求参数在URL后拼，send方法为空
- post：请求参数在send方法中写
- 参数2：URL
- 参数3：true-异步，false-同步 3、发送请求
xmlhttp.send();
4、获取并处理服务器的响应结果
//方式：xmlhttp.responseText //时间：响应成功后 //onreadystatechange 对象就绪状态改变 xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } }
jQuery实现方式
$.ajax({ url:"ajaxServlet1111" , type:"POST" , data:{"username":"admin","age":20}, success:function (data) { alert(data); }, error:function () { alert("出错啦...") }, dataType:"text" });
- url：请求路径
- type：请求方式
- date：请求参数，上例中等价于，
data: "username=admin&age=20" - success：响应成功后的回调函数
- error：果请求响应出现错误，会执行的回调函数
- dateType：设置接受到的响应数据的格式
发送get请求——$.get()
语法：$.get(url, [data], [callback], [type])
- url：请求路径
- data：请求参数
- callback：回调函数
- type：响应结果的类型
发送post请求——$.post()
语法：$.post(url, [data], [callback], [type])
- url：请求路径
- data：请求参数
- callback：回调函数
- type：响应结果的类型
结尾：
如果文章中有什么不足，或者错误的地方，欢迎大家留言分享想法，感谢朋友们的支持！
如果能帮到你的话，那就来关注我吧！
如果您更喜欢微信文章的阅读方式，可以关注我的公众号
如果您更加喜欢PC端的阅读方式，可以访问我的个人博客
域名：www.ideal-20.cn
在这里的我们素不相识，却都在为了自己的梦而努力 ❤ 一个坚持推送原创Java技术的公众号：理想二旬不止
