Ajax文件详解

最新推荐文章于 2024-03-28 17:16:20 发布

原创最新推荐文章于 2024-03-28 17:16:20 发布 · 805 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #原生js #xmlhttprequest

Ajax 专栏收录该内容

3 篇文章

订阅专栏

本文详细阐述了创建Ajax文件的四个关键步骤：创建Ajax对象、连接服务器、发送请求及接收响应。通过对比Ajax与万维网的工作过程，进一步加深对Ajax的理解。并提供了完整的Ajax.js代码实例，方便读者实践。

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

在学习Ajax的过程中对ajax文件的过程特此记录

一则加深记忆

二则为大家提供一个思考的方式

关于如何敲出一个ajax文件，首先分析其过程，

包括四步：

1.创建Ajax对象

2.连接服务器

3.发送

4.接收

ps：和万维网的工作过程相似

每个万维网都有一个服务器进程监听TCP端口80，一旦有浏览器发出建立连接请求，1.建立TCP连接，2.浏览器发出请求，3.服务器返回响应，4.TCP连接释放。

知道了Ajax内部的过程就方便记忆多了~

首先创建Ajax对象代码段：

1.创建Ajax对象(这里需要处理一个浏览器兼容性问题)

if(window.XMLHttpRequest)//非IE6

//Js中用没有定义的变量——报错
//用没有定义的属性——undefined
//所有的全局变量都是window的属性，所以加window，undefuned就是false

{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6
}

2.连接服务器
open(方法，文件名，异步传输)
异步传输就是可以多个事情一起做，用的比较多

oAjax.open('GET','a.txt?t='+new Date.getTime(),true);//true表示异步传输

3.发送请求

oAjax.send();

4.接收返回

oAjax.onreadystatechange=function()
{
//oAjax.readystate浏览器和服务器进行到哪一步了

if(oAjax.readyState==4)//读取完成
{
if(oAjax.status==200)//成功
{
alert('成功：'+oAjax.responseText);
}
else
{
alert('失败'+oAjax.status);
}
}
};

在这里多说一点关于

readyState属性：请求状态

0 （未初始化）还没有调用open()方法

1 （载入）已调用send()方法，正在发送请求

2 （载入完成）send()方法完成，已收到全部响应内容

3 （解析）正在解析响应内容

4 （完成）响应内容解析完成，可以在客户端调用了

最后附上完整ajax.js代码

function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

//2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true);


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

//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失败了');
if(fnFaild)
{
fnFaild();
}
}
}
};
}