原生JS与jQuery对AJAX的完成

2019年8月26日 212次阅读 来源: 景初

原生JS与jQuery对AJAX的完成

一、定义

W3C里这么诠释AJAX：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程言语，而是一种运用现有规范的新要领。
AJAX 是与效劳器交流数据并更新部份网页的艺术，在不从新加载全部页面的状况下。

就是运用JS来无革新与后端交互，经由过程get和post体式格局把数据发送到后端，或许要求后端的数据，然后依据要求的数据举行转变DOM节点等操纵，从而取消掉用form的submit体式格局一提交就会跳转页面的状况，像在建立账号的时刻检测此用户名是不是存在就是一个典范的案例，本文讲从原生JS和jQuery方面引见AJAX的完成，跨域题目暂且不表。

二、原生JS完成AJAX

一切当代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

1.GET

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xmlhttp.send();

  • 通报参数直接在?后指定，多个参数用&分开

  • GET要求统一URL时会有缓存，经由过程参数是不是一致来推断

  • 处置惩罚缓存题目，加个时候戳使每次参数不一致，上例中的t=Math.random()

2.POST

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

  • POST没有缓存

  • POST发送的数据量大

  • AJAX没法发送文件

  • readyState转变时触发onreadystatechange事宜，4为完成

  • status是返回状况，200是胜利，404是未找到页面

  • responseText是返回的数据，为字符串花样

三、jQuery完成AJAX

1.GET

运用get()要领时，采纳GET体式格局向效劳器要求数据，并经由过程要领中回调函数的参数返回要求的数据，它的挪用花样以下：
$.get(url,[callback])

$.get("demo_test.php?id=1&name=lemoo",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });

  • 参数经由过程URL通报

  • 有缓存

2.POST

与get()要领比拟，post()要领多用于以POST体式格局向效劳器发送数据，效劳器接收到数据今后，举行处置惩罚，并将处置惩罚结果返回页面，挪用花样以下：
$.post(url,[data],[callback])

$.post("demo_test.php",{
  num:1
},
function (data) {
  alert(data);
});

运用serialize()要领能够将表单中有name属性的元素值举行序列化，天生规范URL编码文本字符串，直接可用于ajax要求，它的挪用花样以下：
$(selector).serialize()

3.ajax

运用ajax()要领是最底层、功用最壮大的要求效劳器数据的要领，它不仅能够猎取效劳器返回的数据，还能向效劳器发送要求并通报数值，它的挪用花样以下：
$.ajax([settings])
个中参数settings为发送ajax要求时的设置对象，在该对象中，url示意效劳器要求的途径，data为要求时通报的数据，dataType为效劳器返回的数据类型，success为要求胜利的实行的回调函数，type为发送数据要求的体式格局，默以为get。

$.ajax({
  type:"post",
  url:"demo_test.php",
  data: { num: 123 },
  dataType:"text",
  success: function (data) {
    alert(1);
  }
});

4.getJSON

运用getJSON()要领能够经由过程Ajax异步要求的体式格局，猎取效劳器中的数组，并对猎取的数据举行剖析，显现在页面中，它的挪用花样为：
$.getJSON(url,[data],[callback])
能够与$.each搭配来遍历数据

$.getJSON("demo_test.php",function(data){
  $.each(data, function (index, sport) {
    if(index==3)
      $("ul").append("<li>" + sport["name"] + "</li>");
  });
});

如许返回的数据直接就是JSON花样的就可以够运用，然则要注重缓存题目。

四、AJAX的调试

在运转AJAX的页面按F12(Chrome下)，进入“Network”选项卡，点击”XHR”过滤器，然后触发AJAX的事宜。
《原生JS与jQuery对AJAX的完成》
点击要举行调试的AJAX行动，进入详情页。
《原生JS与jQuery对AJAX的完成》

  • Request URL:检察要求的地点，平常在这里检察向背景要求的URL是不是准确，毛病404的话平常这里会有题目

  • Request Method:要求的体式格局，检察是GET或许POST，GET要求的参数一致的话会有缓存

  • Status Code:返回状况。平常是200一般；404未找到页面，平常是URL毛病，或许背景没有建立响应的action；500内部效劳毛病，多为背景毛病。

  • 底下的Query String Parameters是向背景发送的数据，平常这里看参数是不是有题目，花样及定名是不是准确，变乱多发地。

点击Response就可以够检察效劳器返回的数据了，平常在这里检察返回是不是一般，花样是不是准确，平常是JSON。

《原生JS与jQuery对AJAX的完成》
基本上经由过程发送的数据及传回的数据就可以定位题目所在了。

五、总结

平常来说，处置惩罚AJAX，用jQuery的get和post的就够用，如果是JSON数据的话用getJSON，注重缓存题目，特别的运用再斟酌用ajax()，别的，AJAX另有一个很严重的题目是跨域，这个今后再说。

    原文作者：景初
    原文地址: https://segmentfault.com/a/1190000003096293
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞