AJAX基础和jQuery中的AJAX

ゞ浴缸里的玫瑰 2022-09-21 11:55 228阅读 0赞

AJAX是在不重新加载整个页面的情况下，与服务器交换数据并异步更新部分网页。  
1. javascript使用ajax  
（1）生成XMLHttpRequest对象

var xmlhttp;
    if(window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }
    else
    {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

（2）XMLHttpRequest对象向服务器发送请求

//语法xmlhttp.open(method,url,async)
    xmlhttp.open("GET","TEST1.txt",true);
    xmlhttp.send();

method:请求的类型有GET 或POST  
url：文件在服务器上的位置  
async:true（异步，默认方式），false（同步）  
*使用POST请求：*  
无法使用缓存文件（更新服务器上的文件或数据库）  
向服务器发送大量的数据（post没有数据量的限制）  
发送包含未知字符的用户输入时，post比get更稳定可靠  
（3）服务器响应  
使用XMLHttpRequest对象的responseText或responseXML属性获得服务器的响应  
responseText:获得字符串形式的响应数据  
responseXML：获得XML形式的响应数据

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
    
    <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; //首先创建一个对象 if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for 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","/ajax/test1.txt",true); xmlhttp.send(); } </script>

*如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性*

<h2>My Book Collection:</h2>
    <div id="myDiv"></div> //一个空的div
    <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>//按钮，点击调用函数
    
    
    <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; var txt,x,i; //创建对象 if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; //获取XML对象 txt=""; x=xmlDoc.getElementsByTagName("title");//取出XML中所有title for (i=0;i<x.length;i++) { //取出每一项及对应值 txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt; } } xmlhttp.open("GET","/example/xmle/books.xml",true); xmlhttp.send(); } </script>

2.jQuery中ajax技术  
![这里写图片描述][20160619140620972]  
（1）jquery中load方法`load(url,[data],[callback])`

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
    <button id="btn1" type="button">获得外部的内容</button>
    
    <script> $(document).ready(function(){ $("#btn1").click(function(){ //点击按钮触发事件 $('#test').load('/example/jquery/demo_test.txt'); }) }) </script>

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。  
responseTxt - 包含调用成功时的结果内容  
statusTXT - 包含调用的状态  
xhr - 包含 XMLHttpRequest 对象

（2）get()方法通过远程HTTP GET请求载入信息  
$(selector).get(url,data,success(response,status,xhr),dataType)  
![这里写图片描述][20160619141142809]

$.get("test.php");//请求test.php网页，忽略返回值

$.get("test.cgi", { name: "John", time: "2pm" },
      function(data){ 
        alert("Data Loaded: " + data);
      });

*post用法与get用法相似*

//发送数据并输出结果
    $.post("test.php", { name: "John", time: "2pm" },
       function(data){ 
         alert("Data Loaded: " + data);
       });

3.getJSON方法  
虽然load方法可以很快的加载数据到页面上，但是有时需要对获取的数据进行处理，但这样获取的内容必须先插入页面中，然后才能进行，因此它的执行效率不高。

$.getJSON(url,\[data\],\[callback\])

首先创建一个.json格式的文件UserInfo.json:

[
        {
            "name":"张三",
            "sex":"男",
            "email":"zhangsan@163.com" },
        {
            "name":"李四",
            "sex":"女",
            "email":"lisi@163.com" }
    ]

4 getScript方法

创建一个文件UserInfo.js:

[20160619140620972]: /images/20220721/1c9af10149964ca584a9de6bd6aeec7e.png
[20160619141142809]: /images/20220721/417b2c26bcde498ba29fcde99f9fcdad.png