欢迎光临
我的个人博客网站

原生 JS 与 jQuery 中的 AJAX

  AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换;AJAX 是一种用于创建快速动态网页的技术。

AJAX是基于现有的Internet标准,并且联合使用它们:

  XMLHttpRequest 对象 (异步的与服务器交换数据);

  JavaScript/DOM (信息显示/交互);

  CSS (给数据定义样式);

  XML (作为转换数据的格式)。

  AJAX应用程序与浏览器和平台无关的。

一、AJAX 工作原理

原生 JS 与 jQuery 中的 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 更稳定也更可靠
  • 原生 JS 与 jQuery 中的 AJAX

     

     

(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 的状态信息。

 原生 JS 与 jQuery 中的 AJAX

  在 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 方法主要用于更新数据。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 原生 JS 与 jQuery 中的 AJAX
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏