当前位置:首页 > 开发 > Web前端 > Ajax > 正文

ajax基础

发表于: 2014-08-29   作者:Panda也编程丶   来源:转载   浏览:
摘要: 一、简介: AJAX即“ A synchronous J avascript + X ML ”(异步JavaScript和XML ),是指一种创建交互式 网页应用的网页开发技术。 AJAX = 异步 JavaScript和 XML( 标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

一、简介:

AJAX即“Asynchronous Javascript + XML ”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面。
 
二、ajax请求
ajax 请求一般分成 4 个步骤。

1、创建 ajax 对象(XMLHttpRequest)

       在创建对象时,有兼容问题,使用以下代码判断:

var sender = null;
if(window.XMLHttpRequest){
    sender = new XMLHttpRequest();       //IE7+,Firefox,Chrome,Opera,Safari
}else{
    sender = new ActiveXObject('Microsoft.XMLHTTP');   //IE6,IE5
}

 

2、连接服务器

         在这里会用到 open() 方法。open() 方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二

         个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。

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

 

 

3、发送请求

        send() 方法。

sender.send();

 

4、接收返回值

onreadystatechange 事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState:请求状态,返回的是整数(0-4)。

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

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

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

3(解析):正在解析响应内容。

4(完成):响应内容解析完成,可以在客户端调用。

status:请求结果,返回 200 或者 404。

200 => 成功。

404 => 失败。

responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。

sender.onreadystatechange=function(){
    if(sender.readyState==4){
        if(sender.status==200){
            var file = sender.responseText;
        }
    }
};

 

 

测试范例:

ClassLoader.loadScriptSync = function(){
	if(arguments.length == 0){
		return 
	}
	var clsName;
	if(arguments.length == 1){
		clsName = arguments[0];
		if(ClassLoader.cacheScript[clsName]){
			return 
		}
	}
	
	//1、获取XMLHttpRequest对象
	var sender = ClassLoader.createNewTransport();
	var temp = new Date().getTime()
	var method = "GET"
	var url = clsName
	var reqString = ""
	if(typeof clsName == "object" && clsName.length > 0){
		method = "POST"
		url = "*"
		reqString = clsName.join("&_")
	}
	//2、连接服务器
	sender.open(method, url + ".js?temp=" + temp, false)
	sender.setRequestHeader('encoding' , 'utf-8');
	try{
	//3、发送请求到服务器	
		sender.send("")
	}catch (e){
		alert(e)
	}
	//4、接收返回值
	if(sender.readyState == 4){
			if(sender.status == 200){
				var file = sender.responseText
				if(file.length == 0){
					return;
				}
				ClassLoader.markCache(clsName);
				try{
					ClassLoader.eval(file);
				}catch(e){
					throw e;
					ClassLoader.clearCache(clsName);
					if(ClassLoader.debug){
						alert(clsName + " script file error : /r" + e.toString())
					}
				}
			}
	} else {
		if(ClassLoader.debug){
			alert(clsName + " class file load failed")
		}
	}
	//5、终止ajax请求
	sender.abort();
}

 

 

ajax基础

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Ajax作用 Ajax(Asynchronous Javascript and XML 译成:异步的javascript和xml)是2005年2月才正式
1、概述 2、异步处理请求 </
Ajax ( asynchronousjavascript and xml ) ajax不是一项具体的技术,而是Javascript、XHTML和CSS、D
一、ajax技术之传统的b/s结构 在我们刚刚开始web开发时,我们用的是b/s模型的,我们请求浏览器数据
你是什么?(AJAX简介) AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是
几个问题引发的思考:什么是Ajax?它是干什么的?在什么时候用?同步和异步又是什么?这一连串的问
javascript中dom实现可以使我们在ajax中通过javascript代码对html和xml数据进行dom方式操作,从而做
一、 Ajax ( asynchronousjavascript and xml )简介 ajax不是一项具体的技术,而是Javascript、XHTM
上节课说到了一个简单的例子,并且简单的分析了一下 如何创建一个XMLHttpRequest对象。 这节课,我
上节课说到了一个简单的例子,并且简单的分析了一下 如何创建一个XMLHttpRequest对象。 这节课,我
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号