原生 JS 与 jQuery 中的 AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；AJAX 是一种用于创建快速动态网页的技术。
AJAX是基于现有的Internet标准，并且联合使用它们：
XMLHttpRequest 对象 (异步的与服务器交换数据)；
JavaScript/DOM (信息显示/交互)；
CSS (给数据定义样式)；
XML (作为转换数据的格式)。
AJAX应用程序与浏览器和平台无关的。
一、AJAX 工作原理
XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二、原生 JS 中的 AJAX
1、创建 XMLHttpRequest 对象
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2、AJAX - 向服务器发送请求
如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
3、GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
(1）GET 请求
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();//如果希望通过 GET 方法发送信息，请向 URL 添加信息。
(2) POST 请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，要使用 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)：向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
open() 方法的url参数是服务器上文件的地址。该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
4、异步 - True 或 False？
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true。
(1) Async=true
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
(2) Async = false
如需使用 async=false，请将 open() 方法中的第三个参数改为 false,不推荐使用 async=false，但是对于一些小型的请求，也是可以的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注意：当使用 async=false 时，不要编写 onreadystatechange 函数,把代码放到 send() 语句后面即可
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
5、AJAX - 服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
|
responseText |
获得字符串形式的响应数据。 |
|
responseXML |
获得 XML 形式的响应数据。 |
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。
6、onreadystatechange 事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意：onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
三、jQuery 中的 AJAX
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。
1、jQuery load() 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的URL参数规定希望加载的 URL。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。
可选的callback参数是 load() 方法完成后所执行的函数名称。
也可以把 jQuery 选择器添加到 URL 参数。
eg $("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt- 包含调用成功时的结果内容
- statusTXT- 包含调用的状态
- xhr- 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
2、jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的URL参数规定希望请求的 URL。
可选的callback参数是请求成功后所执行的函数名。
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
3、jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的URL参数规定您希望请求的 URL。
可选的data参数规定连同请求发送的数据。
可选的callback参数是请求成功后所执行的函数名。
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
4、GET 和 POST 方法的区别：
1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
5、可变大小
GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。
6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
原生 JS 与 jQuery 中的 AJAX的更多相关文章
- 原生JS和jQuery中基本的节点操作
js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...
- 原生js模拟jquery中的addClass和removeClass方法
js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...
- Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比
讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题. 这是一个典型的 B/S 模式. ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- js和jquery中有关透明度操作的问题
在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器 ...
- js中的原生Ajax和JQuery中的Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...
- JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- 从零开始学 Web 之 Ajax（六）jQuery中的Ajax
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- apt-key Debian packages密钥管理命令
adv子命令 Pass advanced options to gpg. With adv --recv-key you can e.g. download key from keyservers ...
- Unittest方法 -- 测试套件
TestSuite 测试固件 一. import unittestclass F6(unittest.TestCase): def setUp(self): pass def tearDown(sel ...
- 网络损伤仪WANsim的功能与型号
网络损伤仪简介 WANsim网络损伤仪是一款可以模拟真实的广域网状况的设备.它可以通过简单的数据填写模拟出时延.带宽抖动.丢包.乱序.误码.报文重复等网络状况. 大多数公司在进行产品测试时,只关注了应 ...
- 【每日算法】存在重复元素 III
题目描述 这是 LeetCode 上的 220. 存在重复元素 III, 难度为 [中等] 给你一个整数数组 nums 和两个整数 k 和 t .请你判断是否存在 两个不同下标 i 和 j,使得 ab ...
- odoo14--odoo前端框架owl【odoo web library】
原文链接:https://www.alanhou.org/odoo-14-owl-todolist/ 1.组件树 Root / \ A B / \ ...
- ASP.NET中<%=%>、<%%>、<%@%>、<%#%>的用法与区别
1.<%= %> 里面放变量名,获取后台的变量值,直接输入变量到页面上,里面放的变量名,未经过encode eg: 后台: seession["ab"]=ab; 前台: ...
- js学习笔记之日期倒计时DOM操作
1.访问html元素 getElementById() 方法 返回对拥有指定 id 的第一个对象的引用,只有dom对象有效 getElementsByName() 方法 返回指定名称的对象集合 g ...
- 线性反馈移位寄存器（LFSR）
LFSR用于产生可重复的伪随机序列PRBS,该电路有n级触发器和一些异或门组成,如下图所示. 其中,gn为反馈系数,取值只能为0或1,取为0时表明不存在该反馈之路,取为1时表明存在该反馈之路:这里的反 ...
- centos 服务
1,开机开启服务 # chkconfig vsftpd on
- 博主从零开始学习HTML（入门基础）
目录 从零开始学习HTML(入门基础) 互联网三大基石 HTML的Head标签中的常用元素 字体格式化标签 字符实体,以下写最常用的几个 html常用标签及解析 a标签 img标签 媒体标签audio ...