您好！欢迎访问家园网-www.jy.wang!

家园网

您当前的位置：首页 > 计算机技术 > JavaScript

Ajax无刷新技术实现

网络 作者：本站 点击： 


var net=new Object();		//创建一个自定义对象
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
  if (!method){
    method="GET";	//设置默认的请求方式为GET
  }
  if (window.XMLHttpRequest){	//非IE浏览器
    this.req=new XMLHttpRequest();	//创建XMLHttpRequest对象
  } else if (window.ActiveXObject){//IE浏览器
		try {
			this.req=new ActiveXObject("Microsoft.XMLHTTP");	//创建XMLHttpRequest对象
		} catch (e) {
			try {
				this.req=new ActiveXObject("Msxml2.XMLHTTP");	//创建XMLHttpRequest对象
		   } catch (e) {}
		}
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.AjaxRequest.onReadyState.call(loader);
      }
      this.req.open(method,url,true);		// 建立对服务器的调用
	  if(method=="POST"){		// 如果提交方式为POST
		this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 	// 设置请求的内容类型
		this.req.setRequestHeader("x-requested-with", "ajax");	//设置请求的发出者
	  }
      this.req.send(params);			// 发送请求
    }catch (err){
      this.onerror.call(this);			//调用错误处理函数
    }
  }
}
//重构回调函数
net.AjaxRequest.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;		//获取请求状态
  if (ready==4){							//请求完成
	    if (req.status==200 ){					//请求成功
	    	this.onload.call(this);
	    }else{
    		this.onerror.call(this);		//调用错误处理函数
	    }
  }
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){
	alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}

逐行讲解：

var net = new Object();  // 创建一个自定义对象

  • 这行代码使用 new Object() 创建了一个新的空对象，并将其赋值给变量 net。net 现在是一个自定义对象，可以用来存储属性和方法。

// 编写构造函数
net.AjaxRequest = function(url, onload, onerror, method, params) {

  • 这行代码定义了一个名为 AjaxRequest 的构造函数，并将其赋值给 net 对象的属性 AjaxRequest。构造函数接受五个参数：url（请求的 URL）、onload（请求成功时的回调函数）、onerror（请求失败时的回调函数）、method（HTTP 方法，如 GET 或 POST）和 params（请求参数）。

  this.req = null;

  • 在构造函数内部，this.req 被初始化为 null。this.req 通常用于存储 XMLHttpRequest 对象，用于发送 AJAX 请求。

  this.onload = onload;

  • this.onload 被赋值为传入的 onload 回调函数。当 AJAX 请求成功时，这个回调函数会被调用。

  this.onerror = (onerror) ? onerror : this.defaultError;

  • this.onerror 被赋值为传入的 onerror 回调函数。如果 onerror 未提供，则使用 this.defaultError 作为默认错误处理函数。this.defaultError 通常是一个预定义的错误处理函数。

  this.loadDate(url, method, params);
}

  • 最后，调用 this.loadDate 方法，传入 url、method 和 params 参数。loadDate 方法负责发送 AJAX 请求。

net.AjaxRequest.prototype.loadDate = function(url, method, params) {

  • 定义 loadDate 方法，作为 AjaxRequest 的原型方法，用于初始化 XMLHttpRequest 对象并发送 HTTP 请求。

  if (!method) {
    method = "GET";  // 设置默认的请求方式为 GET
  }

  • 如果未提供 method 参数，则默认使用 GET 请求方法。

  if (window.XMLHttpRequest) {  // 非 IE 浏览器
    this.req = new XMLHttpRequest();  // 创建 XMLHttpRequest 对象
  } else if (window.ActiveXObject) {  // IE 浏览器
    try {
      this.req = new ActiveXObject("Microsoft.XMLHTTP");  // 创建 XMLHttpRequest 对象
    } catch (e) {
      try {
        this.req = new ActiveXObject("Msxml2.XMLHTTP");  // 创建 XMLHttpRequest 对象
      } catch (e) {}
    }
  }

  • 检测浏览器类型，创建兼容的 XMLHttpRequest 对象。非 IE 浏览器直接使用 XMLHttpRequest，IE 浏览器使用 ActiveXObject。

  if (this.req) {
    try {
      var loader = this;
      this.req.onreadystatechange = function() {
        net.AjaxRequest.onReadyState.call(loader);
      }

  • 如果成功创建 XMLHttpRequest 对象，设置 onreadystatechange 事件处理函数，调用 onReadyState 方法处理请求状态变化。

      this.req.open(method, url, true);  // 建立对服务器的调用
      if (method == "POST") {  // 如果提交方式为 POST
        this.req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 设置请求的内容类型
        this.req.setRequestHeader("x-requested-with", "ajax");  // 设置请求的发出者
      }
      this.req.send(params);  // 发送请求
    } catch (err) {
      this.onerror.call(this);  // 调用错误处理函数
    }
  }
}

  • 配置请求方法（GET/POST）、URL、异步标志（true），设置 POST 请求头，发送请求参数。捕获异常时调用错误处理函数。

net.AjaxRequest.onReadyState = function() {

  • 定义 onReadyState 方法，作为 AjaxRequest 的静态方法，用于处理 XMLHttpRequest 的状态变化。

  var req = this.req;
  var ready = req.readyState;  // 获取请求状态

  • 获取当前的 XMLHttpRequest 对象和请求状态（0-4）。

  if (ready == 4) {  // 请求完成
    if (req.status == 200) {  // 请求成功
      this.onload.call(this);
    } else {
      this.onerror.call(this);  // 调用错误处理函数
    }
  }
}

  • 当请求状态为 4（请求完成）时，检查 HTTP 状态码：

    • 状态码 200 表示请求成功，调用 onload 回调函数。

    • 其他状态码表示请求失败，调用 onerror 回调函数。

net.AjaxRequest.prototype.defaultError = function() {
  alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}

  • 定义 defaultError 方法，作为 AjaxRequest 的原型方法，用于处理默认错误：

    • 弹出警告框显示错误信息，包括请求状态和 HTTP 状态码。


状态码 200 表示请求成功，调用 onload 回调函数。 其他状态码表示请求失败，调用 onerror 回调函数。讲讲这两个函数

jsonCopy Code{
 "标题": "HTTP 状态码 200 和错误处理机制",
 "内容": "状态码 200 表示请求成功，服务器已成功处理请求并返回数据。onload 回调函数在请求成功时被调用，处理返回的数据。其他状态码（如 404、500）表示请求失败，onerror 回调函数被调用，处理错误情况。",
 "时间": "2025-12-04 18:49:13",
 "来源": "HTTP 协议规范",
 "可信程度": "非常高"}

状态码 200 表示请求成功

  • ‌含义‌：状态码 200 表示 HTTP 请求已成功处理，服务器返回请求的数据。

  • ‌触发条件‌：当 req.status 为 200 时，调用 this.onload.call(this)。

  • ‌作用‌：执行成功回调函数，处理返回的数据（如更新页面内容、解析 JSON 等）。

其他状态码表示请求失败

  • ‌含义‌：非 200 状态码（如 404、500）表示请求失败，服务器未成功处理请求。

  • ‌触发条件‌：当 req.status 不为 200 时，调用 this.onerror.call(this)。

  • ‌作用‌：执行错误回调函数，处理错误情况（如显示错误信息、重试请求等）。

回调函数详解

  • ‌onload 回调函数‌：

    • ‌功能‌：处理请求成功后的数据。

    • ‌示例‌：解析 JSON 数据、更新 DOM 元素。

    • ‌调用时机‌：req.status 为 200 时触发。

  • ‌onerror 回调函数‌：

    • ‌功能‌：处理请求失败的错误。

    • ‌示例‌：显示错误提示、记录日志。

    • ‌调用时机‌：req.status 非 200 时触发。

示例代码

// 成功回调函数
this.onload = function() {
  console.log("请求成功:", this.req.responseText);
};
// 错误回调函数
this.onerror = function() {
  console.error("请求失败:", this.req.status);
};

‌注意‌：状态码 200 是 HTTP 协议的标准成功状态码，其他状态码（如 404 表示资源未找到，500 表示服务器错误）均表示请求失败。


AJAX 无刷新技术实现原理

  1. ‌创建 XMLHttpRequest 对象‌：

    • 通过 new XMLHttpRequest() 创建核心通信对象，替代传统同步请求。

    • 该对象在后台与服务器建立连接，不影响页面渲染。

  2. ‌配置请求参数‌：

    • 使用 open(method, url, true) 设置请求方法（GET/POST）、URL 和异步标志（true）。

    • 异步标志确保请求在后台执行，浏览器可继续响应用户操作。

  3. ‌发送请求‌：

    • 通过 send(params) 方法发送数据（POST 请求需设置请求头）。

    • 浏览器立即返回控制权，无需等待服务器响应。

  4. ‌数据回调机制‌：

    • onload：HTTP 状态码为 200 时调用，处理成功响应数据。

    • onerror：状态码非 200 时调用，处理错误情况。

    • 监听 onreadystatechange 事件，实时检测请求状态变化。

    • 当 readyState 为 4（请求完成）时，触发回调函数。

    • 核心回调函数包括：

  5. ‌处理响应数据‌：

    • 成功响应（状态码 200）时，调用 onload 回调函数，解析数据并更新页面（如 DOM 操作）。

    • 失败响应（非 200）时，调用 onerror 回调函数，显示错误信息或重试请求。

    • 通过 this.req.responseText 获取服务器返回的数据。

关键代码实现

// 创建 XMLHttpRequest 对象
this.req = new XMLHttpRequest();
// 配置请求参数
this.req.open(method, url, true);
// 监听状态变化
this.req.onreadystatechange = function() {
  if (this.req.readyState == 4) {  // 请求完成
    if (this.req.status == 200) {  // 请求成功
      this.onload.call(this);  // 调用成功回调
    } else {
      this.onerror.call(this);  // 调用错误回调
    }
  }
};
// 发送请求
this.req.send(params);

核心特点

  • ‌异步执行‌：浏览器在发送请求后继续响应用户操作，提升用户体验。

  • ‌状态监听‌：通过 onreadystatechange 实时监控请求状态，确保数据回调及时触发。

  • ‌回调函数‌：onload 处理成功响应，onerror 处理错误情况，实现数据的动态更新。

  • ‌无刷新更新‌：通过 DOM 操作直接更新页面内容，无需重新加载整个页面。

标签：