JS——Ajax

最新推荐文章于 2025-07-05 12:46:28 发布

原创最新推荐文章于 2025-07-05 12:46:28 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文深入讲解Ajax的工作原理，包括请求与响应的过程、GET与POST的区别、如何阻止缓存及JSON数据处理方法。并通过实例演示了如何使用Ajax进行文件读取与页面动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用

语法：

ajax(url,funSu,funFa);

参数说明：

url：文件路径，绝对或相对都行。

funSu：读取成功执行函数

funFa：读取失败执行函数

实例：

请求并显示静态txt文件

ajax("fileName.txt", function(str){
    alert(str);
},function(){
    alert("失败")
});

字符集编码

请求文件、JS、HTML编码要统一。

否则，会出现乱码。

缓存，阻止缓存

浏览器会自动缓存，这样就可能导致了用户想得到的信息不能及时更新。

缓存原理：

浏览器是根据域名进行缓存的，
只要url不变，在一定的时间就会读取缓存的数据显示到页面，而不是向服务器请求。

阻止缓存：

使用ajax请求文件的时候，文件路径加上一个一直在变化的参数，
例如使用Date对象的getTime方法。

实例：

//上面的url写成下面这样

"fileName.txt?t="+new Date().getTime()

获取数组或json文件

//arr.txt(json)
[{a:1, b:2},{c:11, d:12}]

//ajax获取
ajax("arr.txt?t="+new Date().getTime(), function(str){
    var arr = eval(str);

    //现在获取a的值
    alert(arr[0].a);
},function(){
    alert("失败")
});

获取文件后，显示在页面

//arr.txt

[{user:'Tim',pass:'123456'},{user:'Chen',pass:'234567'},{user:'Kly',pass:'345678'}]

//ajax

html
<input id = "btn1" type = "button" value = "出来吧" />

<ul id = "ul1">
</ul>


js
var oBtn = document.getElementById("btn1");
var oUl  = document.getElementById("ul1");

oBtn.onclick = function(){
    ajax("arr.txt="+new Date().getTime(), function(str){
    var arr = eval(str);

        for(var i = 0; i < arr.length; i++){
            var oLi = document.createElement("li");

            oLi.innerHTML = "用户名：<strong>'arr[i].user+'<strong>密码：<span>'arr[i].pass+'</span>";

            oUl.appendChild(oLi);
        }
    },function(){
        alert("失败")
    });
}

HTTP请求

请求过程

完整的请求过程：

建立TCP连接；
web浏览器向web服务器发送请求命令；
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭TCP连接

简化一下：

创建Ajax对象（XMLHttpRequest对象）
连接到服务器
发送请求
接收返回值

请求组成部分

请求一般有以下几个部分组成：

1.HTTP请求的方法或动作，比如是GET还是POST请求；

2.正在请求的URL地址；

3.请求头，包含一些客户端环境信息，身份验证信息等；

4.与请求头之间，有一空行。
   请求体（请求正文），可以包含客户提交的查询字符串信息，表单信息等。

GET && POST 请求方式

GET

使用URL传递参数

容量小（2000个字符）

安全性差

有缓存

POST

不通过URL

容量大（2G）

安全性较好

没有缓存

XMLHttpRequest发送请求（IE10+）

调用HTTP请求：
open(method , url , async)
将请求发送到服务器上：
send(string)

async :

同步（false）/异步（true）

默认是true，所以可以不写。

XMLHttpRequest获取响应（IE10+）

响应组成部分

1.一个数字和文字组成的状态码，用来显示请求是成功还是失败；

2.响应头，和请求用一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。

3.响应体（响应正文）

我们通过onreadystatechange事件获取响应信息。

首先，我们需要通过readyState属性和HTTP状态码，监听一下服务器接收完请求没有。

readyState属性：

这里写图片描述

状态码：

这里写图片描述

简单来讲，网页只有在HTTP状态码为200，readyState为4的情况下才能正确响应。

响应操作方法

           reponseText: 获得字符串形式的响应数据

            reponseXML: 获得XML形式的响应数据

    status、statusText: 以数字和文本形式返回HTTP状态码

getAllResponseHeader(): 获取所有的响应报头

   getResponseHeader(): 查询响应中的某个字段的值

实例：

获取一个a.txt文件

html
<input id = "btn1" type = "button" value = "读取">

js
//1.创建Ajax对象（IE7+）
var oAjax = new XMLHttpRequest( );

//2.连接服务器
oAjax.open('GET','a.txt',true);

//3.发送请求
oAjax.send();

//4.接收返回值
oAjax.onreadystatechange = function(){
    //读取完成
    if( request.readyState === 4){
        //读取成功
        if(request.status === 200){
            alert("成功："+oAjax.responseText);        
        }else{
            alert("失败"+oAjax.status)
        }
    }
}

JSON格式使用Ajax

主要差异在读取成功后

//读取成功
        if(request.status === 200){
            //使用JSON.parse()解析数据
            var data = JSON.parse(oAjax.responseText);

            if(data.success){
                alert("成功："+oAjax.responseText);    
            }else{
                alert("失败："+oAjax.status);
            }   
        }else{
            alert("失败"+oAjax.status)
        }