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的更多相关文章

  1. 原生JS和jQuery中基本的节点操作

    js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...

  2. 原生js模拟jquery中的addClass和removeClass方法

    js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...

  3. Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

    讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题. 这是一个典型的 B/S 模式. ...

  4. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  5. js和jquery中有关透明度操作的问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置       透明度在IE浏览器 ...

  6. js中的原生Ajax和JQuery中的Ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...

  7. JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  8. 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

  9. 从零开始学 Web 之 Ajax（六）jQuery中的Ajax

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 微信小程序云开发-数据库表创建和操作

    一.新建云数据库 进入[云开发]界面,点击[数据库]>添加>创建集合>确定. 二.向数据库中添加数据 选中[数据库],点击[添加记录],向数据库中添加记录 添加[字段]和[值],并选 ...

  2. LCT(Link-Cut-Tree)

    LCT(Link-Cut-Tree) LCT维护一个森林,即把每个节点用splay维护,可以进行许多操作: 查询.修改链上的信息 随意指定原树的根(即换根) 动态连边.删边 合并两棵树.分离一棵树 动 ...

  3. idea使用maven下载jar包，出现证书校验问题问题,unable to find valid certification path to requested target

    每次从github上下载下来的项目都报如下错误could not transfer artifact org.springframework.boot:spring-boot-starter-pare ...

  4. java String转List<Device>集合

    // 从Redis中获得正常设备的数量 String success = redisService.get(RedisKey.CULTIVATION_RECORD_SUCCESS); //建立一个li ...

  5. odoo14里面的消息机制

    odoo里面 字段追踪.消息通知机制:  一.使用方式:1.在定义模型的py文件里继承mail模型 class DemoModle(models.Model): """ ...

  6. PHP：字符串转数组，数组转字符串；字符串截取、替换、查找

    字符串转数组$str = 'one|two|three|four'; print_r(explode('|', $str)); //explode 以字符串分割字符串到数组 $str = 'one t ...

  7. 图解 HTTP 连接管理

    熟悉我的小伙伴都知道,我之前肝了本<HTTP 核心总结>的 PDF,这本 PDF 是取自我 HTTP 系列文章的汇总,然而我写的 HTTP 相关内容都是一年前了,我回头看了一下这本 PDF ...

  8. .NET Conf 2020大会将于2020年11月10日--- 11月12日举行 （UTC）时区

    .NET Conf 2020大会将于2020年11月10日--- 11月12日举行 (UTC)时区 开始时间 2020年11月10日 08:00 (PT) | 16:00 (UTC)| 24:00(北 ...

  9. rabbitmq消息处理-转载

    目录 1. 消息如何保障百分之百的投递成功? 1.1 方案一:消息落库,对消息状态进行打标 1.2 方案二:消息的延迟投递,做二次确认,回调检查 2. 幂等性 2.1 幂等性是什么? 2.2 消息端幂 ...

  10. 并发编程——Java线程的6种状态及切换

    前言 本次主要分享一下Java线程的六种状态及其转换. 如果对于线程的创建方式不太了解,推荐观看并发编程--认识java里的线程 线程的状态及其转换 操作系统线程的五种状态 新建(NEW) 就绪(RU ...