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. 【LeetCode】94. 二叉树的中序遍历

    94. 二叉树的中序遍历 知识点:二叉树:递归:Morris遍历 题目描述 给定一个二叉树的根节点 root ,返回它的 中序 遍历. 示例 输入:root = [1,null,2,3] 输出:[1, ...

  2. DNS Bind日志详述

    简介 在默认情况下,BIND9 把日志消息写到 /var/log/messages 文件中,而这些日志消息是非常少的,主要就是启动,关闭的日志记录和一些严重错误的消息:而将调试日志信息写入 BIND ...

  3. [XIN算法应用]NOI2020美食家

    XIN(\(updated 2021.6.4\)) 对于很多很多的题目,发现自己并不会之后,往往会直接冲上一个XIN队算法,然而,这样 \(\huge{\text{鲁莽}}\) 的行为只能获得 TLE ...

  4. 第十二篇 -- QMainWindow与QAction（剪切-复制-粘贴）

    效果图: 按照上一节的方法,将剪切-复制-粘贴图标放置到工具栏后,为其指定槽函数.这些功能无需自己编写代码来实现,QPlainTextEdit提供了实现这些编辑功能的槽函数,如cut().copy() ...

  5. etcd学习(5)-etcd的Raft一致性算法原理

    ETCD的Raft一致性算法原理 前言 Raft原理了解 raft选举 raft中的几种状态 任期 leader选举 日志复制 安全性 leader宕机,新的leader未同步前任committed的 ...

  6. python编写DDoS攻击脚本

    python编写DDoS攻击脚本 一.什么是DDoS攻击 DDoS攻击就是分布式的拒绝服务攻击,DDoS攻击手段是在传统的DoS攻击基础之上产生的一类攻击方式.单一的DoS攻击一般是采用一对一方式的, ...

  7. swift文件调用oc分类时崩溃解决办法（可能全网唯一）

    背景 oc为基础创建的sdk混编工程,在被sdk关联的混编demo工程中swift文件调用时,会崩溃,提示找不到sdk中oc分类方法.常规的,在demo中设置-Objc和-all_load也还是会崩. ...

  8. Apache解析漏洞

    多解析特性 在Apache1.x,2.x中Apache 解析文件的规则是从右到左开始判断解析,如果后缀名为不可识别文件解析,就再往左判断.因此对于apache而言,一个test.php.qwea文件依 ...

  9. BUUCTF-[HCTF 2018]admin(Unicode欺骗&伪造session)

    目录 方法一:Unicode欺骗 方法二:伪造session 参考文章 记一道flask下session伪造的题. 方法一:Unicode欺骗 拿到题目f12提示you are not admin,显 ...

  10. RHCE_DAY01

    shell概述 shell是一个程序,它连接了用户和Linux内核,它可以解释用户输入的命令传递给内核,让用户可以更加方便的使用Linux系统 shell 本身并不是内核的一部分,它只是站在内核的基础 ...