`

Ajax:基础的通信方式

 
阅读更多

Sky = {};

/*
url-loading object and a request queue built on top of it
*/
Sky.Ajax = function (paramObj) {//url, onload, onerror, method, params, contentType) {
	this.req = null;
	this.onload = paramObj.onload || function(){};
	this.onerror = (paramObj.onerror) ? paramObj.onerror : this.defaultError;
	this.url = paramObj.url;
	this.method = paramObj.method;
	this.params = paramObj.params;
	this.contentType = paramObj.contentType;
	this.sendRequest(paramObj.url, paramObj.method, paramObj.params, paramObj.contentType);
};

Sky.Ajax.READY_STATE_UNINITIALIZED = 0;
Sky.Ajax.READY_STATE_LOADING = 1;
Sky.Ajax.READY_STATE_LOADED = 2;
Sky.Ajax.READY_STATE_INTERACTIVE = 3;
Sky.Ajax.READY_STATE_COMPLETE = 4;

Sky.Ajax.prototype.reload = function() {
	this.sendRequest(this.url, this.method, this.params, this.contentType);
};

Sky.Ajax.prototype.sendRequest = function (url, method, params, contentType) {
	method = method || "GET";
	if (!contentType && method == "POST") {
		contentType = "application/x-www-form-urlencoded";
	}
	if (window.XMLHttpRequest) {
		this.req = new XMLHttpRequest();
	} else {
		if (window.ActiveXObject) {
			this.req = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	if (this.req) {
		try {
			var loader = this;
			this.req.onreadystatechange = function () {
				Sky.Ajax.onReadyState.call(loader);
			};
			this.req.open(method, url, true);
			if (contentType) {
				this.req.setRequestHeader("Content-Type", contentType);
			}
			this.req.send(params);
		}
		catch (err) {
			this.onerror.call(this);
		}
	}
};

Sky.Ajax.onReadyState = function () {
	var req = this.req;
	var ready = req.readyState;
	
	if (ready == Sky.Ajax.READY_STATE_COMPLETE) {
		var httpStatus = req.status;
		if (httpStatus == 200 || httpStatus == 0) {
			this.onload.call(this, req.responseText);
		} else {
			this.onerror.call(this);
		}
	}
};

Sky.Ajax.prototype.defaultError = function () {
	alert("error fetching data!" + "\n\nreadyState:" + this.req.readyState + "\nstatus: " + this.req.status + "\nheaders: " + this.req.getAllResponseHeaders());
};
 
分享到:
评论

相关推荐

    精通Ajax 基础概念.核心技术与典型案例

    ## **一、Ajax基础概念** 1. **异步通信**:Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信,不阻塞用户对页面的操作。 2. **局部刷新**:Ajax可以只更新网页的部分区域,而不是整个页面...

    精通AJAX:基础概念、核心技术与典型案例_0.rar

    1. **异步通信**:AJAX 的核心是使用 XMLHttpRequest 对象进行异步通信。这是一种允许网页向服务器请求并获取新数据的技术,而无需整个页面刷新。 2. **局部刷新**:通过 AJAX 技术,只有需要更新的数据会被加载到...

    JQueryMobile与后台通信

    **一、AJAX:基础通信方式** 1. **AJAX简介**:AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。jQuery库封装了AJAX功能,使得在jQuery Mobile中使用AJAX进行...

    Ajax:Web2.0 开发技术详解

    1. **基础概念**:解释Ajax的工作原理,包括异步通信、 XMLHttpRequest对象(XHR)的作用以及如何通过JavaScript与服务器进行交互。 2. **XML与JSON**:由于Ajax最初与XML紧密相关,因此会介绍XML的基本结构和解析...

    深入浅出Ajax(Head Rush Ajax) 源码 书中代码

    - 浏览器与服务器间通信的基础知识 2. **第二章:创建第一个Ajax请求** - XMLHttpRequest对象的使用 - GET和POST请求的发送 - 异步处理与回调函数 3. **第三章:处理响应** - 解析XML和JSON数据 - DOM操作与...

    《Ajax实战:实例详解》sources

    1. **Ajax基础**:Ajax的核心是创建XMLHttpRequest对象,它是浏览器内置的API,用于在后台与服务器进行通信。这个对象提供了发送HTTP请求并接收响应的方法,如`open()`、`send()`和`onreadystatechange`事件处理。 ...

    AJAX培训 - 第一讲:AJAX基础

    ### AJAX培训 - 第一讲:AJAX基础 #### 一、引言 随着网络技术的发展,用户对于网页的交互性和实时性有了更高的期待。传统的Web应用程序每次与服务器交互都需要进行整个页面的刷新,这种方式不仅效率低下,而且用户...

    Ajax实战:实例详解源代码

    ### 一、Ajax基础 Ajax的核心是创建XMLHttpRequest对象,它是JavaScript内置的API,用于在后台与服务器通信。以下是一个简单的Ajax请求示例: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', '...

    AJAX异步通信技术学习笔记

    ### AJAX异步通信技术详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML)是一种使用JavaScript和XML在浏览器与服务器之间进行数据传输的技术。通过这种技术,可以实现网页部分更新,而无需重新加载整个...

    ajax入门基础教程

    AJAX(异步JavaScript和XML)技术的引入,彻底改变了传统的Web应用程序的开发方式。在这篇入门教程中,我们将会了解到如何使用JavaScript来实现在网页上异步请求服务器数据的机制,使得用户无需重新加载整个页面即可...

    Ajax基础实例讲解

    在Ajax的基础实例中,通常包括以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,它是浏览器提供的一个内置对象,用于在后台与服务器通信。在JavaScript中,我们可以通过`new XMLHttpRequest()`...

    ASP.NET AJAX深入浅出系列课程(11):Microsoft AJAX Library中异步通信层使用

    在本课程"ASP.NET AJAX深入浅出系列课程(11):Microsoft AJAX Library中异步通信层使用"中,我们将重点探讨Microsoft AJAX Library中的异步通信层,它是实现页面无刷新更新的核心组件。 首先,我们要理解什么是AJAX...

    AJax与PHP基础教程.

    **第一章 - Ajax基础** 在这一章中,你将学习到Ajax的基本概念,包括异步通信的重要性、XMLHttpRequest对象的使用以及如何创建简单的Ajax请求。了解如何通过JavaScript与服务器进行交互,实现页面内容的动态加载,...

    ajax 基础

    以下是对Ajax基础知识的详细阐述: 1. **工作原理** - Ajax 的核心是 XMLHttpRequest 对象,它允许JavaScript在后台与服务器通信,而不会打断用户的交互。 - 一个典型的Ajax流程包括创建XMLHttpRequest对象、打开...

    AJAX技术基础

    **AJAX技术基础** AJAX,全称Asynchronous JavaScript and XML(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现局部...

    ajax in action :ajax 实战 源码

    **一、Ajax基础知识** Ajax的核心是JavaScript和XML,但现代Ajax应用中XML已经逐渐被JSON所取代,因为JSON更轻量级且易于处理。Ajax的工作原理是通过JavaScript创建XMLHttpRequest对象,该对象负责与服务器进行异步...

    AJAX基础.pdf

    ### AJAX基础知识点详解 #### 一、AJAX概述 **AJAX**,全称为 **Asynchronous JavaScript and XML**(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器...

    AJAX基础教程.pdf

    ### AJAX基础教程知识点总结 #### 一、AJAX概述 - **定义**:Asynchronous JavaScript and XML(异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **目的**:提高Web应用的...

    《Ajax与PHP基础教程》

    ### 第一章:Ajax基础 Ajax的核心技术包括XMLHttpRequest对象、JavaScript、DOM(Document Object Model)以及CSS。XMLHttpRequest是Ajax的基础,用于在后台与服务器进行通信。JavaScript处理用户的交互和动态更新...

Global site tag (gtag.js) - Google Analytics