用JS写Ajax的请求函数(1)

本文介绍了Ajax的基本概念,核心技术XMLHttpRequest对象,并详细讲解了创建、连接和发送、接收响应的过程。适合初学者理解简单的Ajax请求,后续会进一步完善更复杂的Ajax函数。

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

ajax:一种请求数据的方式,不需要刷新整个页面;
ajax的技术核心是 XMLHttpRequest 对象;
ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

function ajax(url,fnSucc,fnFaild){

//1.创建Ajax对象

if(window.XMLHttpRequest) 
//虽然没定义,但是以属性形式存在,所以不会报错

{

var oAjax=new XMLHttpRequest();

}

else{

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

}

alert(oAjax);

//2.连接服务器

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

oAjax.open('GET',url,true);

//3.发送请求

oAjax.send();

//4.接收返回

oAjax.onreadystatechange=function(){

//oAjax.readyState //浏览器和服务器,进行到哪一步了if(oAjax.readyState==4)//读取完成

{

if(oAjax.status==200)
//成功

{

fnSucc(oAjax.responseText);

}else{

if(fnFaild)

{

fnFaild(oAjax.status);

}

}

}

};

}

1、创建
1.1、IE7及其以上版本中支持原生的 XHR 对象

var oAjax = new XMLHttpRequest();

var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

2、连接和发送

2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求

2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;

3、接收
3.1、接收到响应后,响应的数据会自动填充XHR对象

status:响应的HTTP状态码;

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下

0-未初始化,尚未调用open()方法;

1-启动,调用了open()方法,未调用send()方法;

2-发送,已经调用了send()方法,未接收到响应;

3-接收,已经接收到部分响应数据;

4-完成,已经接收到全部响应数据;

适合初学Ajax的同学看的简单Ajax请求函数,以后有机会还会补充更为完备的Ajax请求函数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值