深度了解Ajax技术

亦凉 2022-07-15 14:42 194阅读 0赞

1.什么是Ajax？

Ajax技术是使浏览器可以为用户提供更为自然的浏览体验

2.Ajax核心

Ajax的核心是**JavaScript对象XmlHttpRequest。**

该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使用户可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

特点：**无刷新局部更新数据**，至2016年，各大网站几乎都有使用。

3.Ajax的优势与缺点

**优势：****迅捷的反应速度**

a.不需要插件支持

b.优秀的用户体验

c.提高Web程序性能

d.减轻服务器负担

**缺点：**

a.**XmlHttpRequest**对象浏览器支持不足，早些年只有IE浏览器支持（现已解决）

b.破坏 浏览器的“前进”、“后退”按钮的正常功能（现已解决）

c.对浏览器搜索引擎支持不足，无法搜索关键字（仍未解决）

d.开发和调试工具缺乏（仍未解决）webstorm可以

4.Ajax的应用

jQuery对Ajax进行了封装，可用其方法

a.底层方法：$.ajax()       **一般用这种方法，直观快捷，二三层方法都是基于底层方法，需要调用底层方法**

**语法：$.ajax(options)     **

**options是key/value形式，均为可选**

**示例：**

$("#send").click(function(){
    
        $.ajax({
    
            type:"get",   //提交方式
    
            url:"test.asp", //地址
    
            success:function(){}    //执行成功的回调函数
    
            ......  //可以写执行失败的回调函数
    
        });
    
    });

b.第二层方法：load() 、$.get()、$.post()      **get和post方法只有提交方式不同，其余一样，默认get方法**

**load()方法   将远程页面的响应代码插入DOM中**

**语法：load(url,\[data\],\[callback\])**

url : 请求页面的地址

data(可选):  发送到服务器的key/value数据

callback(可选)： 请求完成时的回调函数(无论请求成功或者请求失败)

注意：无参data时以get方式提交，有参data时以post方式提交

示例：

$(function(){
    
    $("#send").click(function(){
    
    $("#resTex").load("test.html");
    
    });
    
    });
    
    $(function(){
    
        $("#send").click(function(){
    
        $("#resTex").load("test.html",{name:"xxx",age:"21"},)
    
        function(responseText,textStatus,XMLHttprequest){
    
            alert(responseText);     //请求访问的内容
    
            alert(textStatus);      //请求的状态(成功或失败)
    
            alert(XMLHttprequest);   //XMLHttprequest对象
    
        };
    
        });
    
    });

**$.get( ) 方法和 $.post( ) 方法**

语法：  
$.get( url \[, data\] \[,callback\] \[, type\] )  
$.post( url \[, data\] \[, callback\] \[, type\] )

url：请求页面的 url

data（可选）：发送到服务器的 key/value数据

callback（可选）：请求完成时的回调函数（只有成功才被调用）

type（可选）：返回内容的格式（text, html, xml, script, json）

示例;

$("#send").click(function(){     //$.get()方法
    
        $.get("AjaxHandler.ashx",
    
            {name: "张三", age:"21"},
    
            function (data, status) {
    
                $("#div").html(data);
    
            });
    
    });
    
    //$.post()方法
    
    $("#send").click(function(){
    
        $.post("AjaxHandler.ashx",
    
            {name: "张三", age:"21"},
    
            function (data, status) {
    
                $("#div").html(data);
    
            });
    
    });

**c.第三层方法：$.getScript()、$getJSON()**

$.getScript( ) 与 $.getJSON( ) 方法

$.getScript( )：动态引入JS文件

语法：  
 $.getScript( JS文件的url ,\[callback\] )

$.getJSON( )：加载JSON文件

语法：  
 $.getJSON( JSON文件url ,\[callback\] )

5.具体使用步骤

//1.创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();

//2.初始化XMLHttpRequest xhr.open("post","data/data1.txt",true); true表示异步请求

//3.设置回调函数
    xhr.onreadystatechange = function(){
        //readyState的值：0-未初始化，1-已初始化，2-已发送请求，还未接到响应，3-接到服务器响应数据，未完成，4-数据接收完成
        //HTTP响应状态码：2xx : 成功，3xx : 请求需要进一步细化，4xx : 客户端错误，5xx : 服务器错误
        if(xhr.readyState==4 && xhr.status==200){
            document.getElementById("d1").innerHTML = xhr.responseText;
        }
    };

//4.发送请求 xhr.send(null);

这里顺便推荐一个高质量的java公众号，赶紧关注领取免费资料吧！

![20200102174740757.png][]

[20200102174740757.png]: /images/20220715/ce240de8a03e4eacae05457b92edaf61.png