ajax从服务器读数据,本地网页不刷新

xiaoxiao2025-08-12  23

function ajax(url,fnSucc,fnFild){ //1.创建对象 var oAjax=null; if (window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); }else{ 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) { fnSucc(oAjax.responseText); }else{ if (fnFild) { fnFild(); } } } } }

1、 if (window.XMLHttpRequest) {             oAjax=new XMLHttpRequest();         }else{             oAjax=new ActiveXObject("Microsoft.XMLHTTP");         }

如果参数未定义会出错,如果属性未定义则为underfind;所以XMLHttpRequest前要加window。其中new ActiveXObject("Microsoft.XMLHTTP")为IE浏览器获取对象特有,其他浏览器则是new XMLHttpRequest()。

2、oAjax.open("GET",url,true);服务器通信方式有两种,一种是get方式,另一种是post方式,get方式把数据放在url中,post则不是。服务器为异步通信,所以用true。

3、当ajax与服务器通信时调用onreadystatechange函数。

4、readyState属性表示请求状态,有5种状态,分别为:

(1)0(未初始化)还没有调用open方法。

(2)1(载入)已调用send方法,正在发送请求。

(3)2(载入完成)send()方法完成,已收到全部相应内容。

(4)3(解析)正在解析相应内容。

(5)4(完成)相应内容解析完成,可在客户端调用。

5、status属性:表示请求结果,其中成功为200,未找到为404。

6、responseText属性:表示返回结果,从服务器返回内容。

7、调用ajax函数如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自创ajax</title> <script src="new_ajax.js"></script> <script> window.onload=function(){ var oBtn=document.getElementById("btn"); oBtn.onclick=function(){ ajax("page1.txt",function(str){ alert(str); }); } } </script> </head> <body> <input type="button" value="点击从服务器获取文件" id="btn"> </body> </html>

 

转载请注明原文地址: https://www.6miu.com/read-5034747.html

最新回复(0)