ajax函数编写

最新推荐文章于 2022-08-17 20:27:22 发布

王华桥

最新推荐文章于 2022-08-17 20:27:22 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏： js小记文章标签：函数 ajax javascript xml 异步

本文链接：https://blog.csdn.net/whqwyn/article/details/52839932

js小记专栏收录该内容

24 篇文章

订阅专栏

本文介绍了AJAX的基本概念，即异步JavaScript和XML，以及如何使用AJAX与服务器交换数据并局部刷新网页。详细讲解了AJAX的开发模式，基础使用如请求静态文件，以及函数编写过程，包括创建XMLHttpRequest对象，处理不同浏览器的兼容性，以及请求状态的监控。最后提到了封装成完整函数的调用方式。

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

一、什么是ajax？

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

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

我的理解就是：在有需要的网页部分进行与服务器交换部分数据并实现无需刷新即可进行数据交换；

ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。
这里写图片描述

二、使用ajax

基础：请求并显示静态TXT文件
字符集编码————-utf-8
缓存、阻止缓存——?t=new Date().getTime()
动态数据：请求JS（或json）文件
eval的使用
DOM创建元素
局部刷新：请求并显示部分网页文件

三、函数编写

（1）、XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

（2）、创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

（3）、创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

（4）、老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：兼容处理

var oAjax;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  oAjax=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }

（5）、编写过程：

创建ajax对象

ActiveXObject("Microsoft.XMLHTTP")//IE
XMLHttpRequest()//非IE

连接服务器

open(方法, 文件名, 异步传输)

发送请求

send();

接收返回值
请求状态监控
lonreadystatechange事件
lreadyState属性：请求状态
——0 （未初始化）还没有调用open()方法
——1 （载入）已调用send()方法，正在发送请求
——2 （载入完成）send()方法完成，已收到全部响应内容
——3 （解析）正在解析响应内容
——4 （完成）响应内容解析完成，可以在客户端调用了
lstatus属性：请求结果
lresponseText

封装成完整的函数

function ajax(url,fnSucc,fnFaild){
    //创建ajax对象
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }
    else{
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //链接服务器
    //open(方法，文件名，异步传输)；
    oAjax.open('GET',url,true);
    //发送
    oAjax.send();
    //接收返回值
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status==200){
                fnSucc(oAjax.responseText);
            }
            else{
                fnFaild(oAjax.status)
            }
        }
    };  
}

调用时：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/new_ajax.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                var Btn=document.getElementById('Btn');
                Btn.onclick=function(){
                    ajax('mytxtb.txt?t='+new Date().getTime(),function (str){
                        var arr=eval(str);
                        alert(arr[1].c);
                    },function(){
                        alert("失败了");
                    });
                };

            };
        </script>
    </head>
    <body>
        <input type="button" name="Btn" id="Btn" value="按钮" />

    </body>
</html>