Ajax的笔记

Ajax指异步JavaScript及XML(Asynchronous JavaScipt And XML),是一种异步交互式网页开发技术,用于创建快速动态网页。与服务器进行少量数据交换中,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

97年微软便发明了ajax的关键技术,并且在99年用于IE5中,但可惜因为其它原因没有被推广搁置了起来,ajax技术的流行得益于google的大力推广。Ajax的核心是JavaScript对象XmlHttpRequest,是一种支持异步请求的技术,它的意义有:1.在不重新加载页面的情况下更新网页。2.在页面已加载后从服务器请求数据。3.在页面已加载后从服务器接收数据。4.在后台向服务器发送数据。需要注意的是AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

1.AJAX的工作原理:

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

2.Ajax的优点:

1.最大的一点是页面无刷新,用户的体验非常好。

2.使用异步方式与服务器通信,具有更加迅速的响应能力。

3.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4.基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

5.Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

3.Ajax的缺点:

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

4.XmlHttpRequest对象的属性和方法:


属性


说明


readyState


存有 XMLHttpRequest 的状态。从0到4发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪


Onreadystatechange


存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。


responseText


服务器响应的文本内容


responseXML


服务器响应的XML内容对应的DOM对象


Status


服务器返回的http状态码。200表示“成功”,404表示“未找到”,500表示“服务器内部错误”等。


statusText


服务器返回状态的文本信息。


方法


说明


Open(string method,string url,boolean asynch,

String username,string password)


指定和服务器端交互的HTTP方法,URL地址,即其他请求信息;

Method:表示http请求方法,一般使用"GET","POST".

url:表示请求的服务器的地址;

asynch:表示是否采用异步方法,true为异步,false为同步;

后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。


Send(content)


向服务器发出请求,如果采用异步方式,该方法会立即返回。

content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。


SetRequestHeader(String header,String Value)


设置HTTP请求中的指定头部header的值为value.

此方法需在open方法以后调用,一般在post方式中使用。


getAllResponseHeaders()


返回包含Http的所有响应头信息,其中相应头包括Content-length,date,uri等内容。

返回值是一个字符串,包含所有头信息,其中每个键名和键值用冒号分开,每一组键之间用CR和LF(回车加换行符)来分隔!


getResponseHeader(String header)


返回HTTP响应头中指定的键名header对应的值


Abort()


停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

上面了解了Ajax以及工作原理和XmlHttpRequest对象的属性和方法,那我们该怎么样来使用它呢?这里我分来五步来实现。

第一步:创建XmlHttpRequest对象:


1

2

3

4

5

6

7

var xmlhttp = null;

//XMLHttpRequest IE6是有兼容问题的,可以判断ie6的 ActiveXObject(‘Microsoft.XMLHTTP‘)

if(window.XMLHttpRequest){

    xmlhttp =new XMLHttpRequest();//除了IE6以外的浏览器

}else{

    xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器

}

第二步:指定链接地址:


1

var url=‘demo.php‘

第三步:发送资源请求给服务器。

使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。

xmlhttp.open(method,url,async) method包括get和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)

xmlhttp.send();使用get方法发送请求到服务器。

xmlhttp.send(string);使用post方法发送请求到服务器。

post 发送请求什么时候能够使用呢?

(1)更新一个文件或者数据库的时候。

(2)发送大量数据到服务器,因为post请求没有字符限制。

(3)发送用户输入的加密数据。

get例子:


1

2

3

4

xmlhttp.open("GET""ajax_info.txt"true);

xmlhttp.open("GET""index.html"true);

xmlhttp.open("GET""demo_get.asp?t=" + Math.random(), true);xhttp.send();

xmlhttp.send(null);//传递参数用的,但是只有在使用post方式提交请求的时候才有用

post例子:


1

2

xmlhttp.open("POST""demo_post.asp"true);

xmlhttp.send();

post表单例子:


1

2

3

xmlhttp.open("POST""ajax_test.aspx"true);

xmlhttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

第四步:服务器响应

使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

responseText:获得字符串形式的响应数据。

responseXML:获得 XML 形式的响应数据。

如果来自服务器的响应并非 XML,请使用responseText属性。

responseText 属性返回字符串形式的响应,因此可以这样使用:

responseText例子:


1

document.getElementById("demo").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

responseXML例子:


1

2

3

4

5

6

7

xmlDoc = xhttp.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("ARTIST");

for (i = 0; i < x.length; i++) {

txt += x[i].childNodes[0].nodeValue + "<br>";

}

document.getElementById("demo").innerHTML = txt;

第五步:onreadystatechange函数的使用

onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。

readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。

status属性,200表示成功响应,404表示页面不存在。

在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。


1

2

3

4

5

6

7

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("demo").innerHTML=xmlhttp.responseText;

    }

  }

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):


1

2

3

4

5

6

7

function myFunction(){

    loadXMLDoc("/try/ajax/ajax_info.txt",function()

    {

        if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

            document.getElementById("demo").innerHTML=xmlhttp.responseText;        }

    });}

在实际的运用中,尝试利用事件+ajax 给button绑定点击事件,然后执行ajax。

server.php

<?php
	if (isset($_POST[‘action‘]))
	{
		switch($_POST[‘action‘])
		{
			case "btn1":btn1();break;
			case "btn2":btn2();break;
			default:break;
		}
	}

	function btn1()
	{
		echo "hello 按钮1";
	}
	function btn2()
	{
		echo "hello 按钮2";
	}

?>

方式:index.php

<html>
<head>
	<style>
		div {width:600px;margin:200px auto;}

		.btn {
			background-color:#44c767;
			-moz-border-radius:28px;
			-webkit-border-radius:28px;
			border-radius:28px;
			border:1px solid #18ab29;
			display:inline-block;
			cursor:pointer;
			color:#ffffff;
			font-family:Arial;
			font-size:17px;
			padding:16px 31px;
			text-decoration:none;
			text-shadow:0px 1px 0px #2f6627;
		}
		.btn:hover {
			background-color:#5cbf2a;
		}
		.btn:active {
			position:relative;
			top:1px;
		}

		#btn2 {float:right;}
	</style>
	<script type="text/javascript" language="javascript">
		var xmlHttp;
		function createXMLHttpRequest(){
			//检查浏览器是否支持 XMLHttpRequest 对象
			if(window.ActiveXObject){
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			else if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();
			}
		}
		function fun(n){
			createXMLHttpRequest();
			var url="server.php";
			xmlHttp.open("POST",url,true);
			xmlHttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
			xmlHttp.onreadystatechange = callback;
			xmlHttp.send("action=" + n.value);
		}
		function callback(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					alert(xmlHttp.responseText);
				}
			}
		}
	</script>
</head>

<body>
	<div>
		<button type="button" class="btn" id="btn1" onclick="fun(this)" value="btn1">按钮1</button>
		<button type="button" class="btn" id="btn2" onclick="fun(this)" value="btn2">按钮2</button>
	</div>
</body>

</html>
时间: 2024-10-08 08:47:33

Ajax的笔记的相关文章

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

Ajax 入门笔记

AJAX =Asynchronous Javascript + XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础.XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1:创建 XMLHttpRequest 对象 为

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM

MVC Ajax Form &amp; Ajax Valida(笔记)

1.引入必要的文件 <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascri

ajax学习笔记1

ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据和内容,实现局部刷新让用户能够更好的浏览网站.在没有ajax的时候,网页提交表单必须进行等待和刷新,这时用户必须等待服务器的响应,用户在当前页面不能做其他事情.自从有了ajax,用户在提交表单的时候不需要等待,可以浏览该页的其它东西,表单提交之后服务器能很快的返回所需的数据和网页,网页无需刷新. a

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTod

Ajax学习笔记(一)

XMLHttpRequest对象详解 1.Ajax应用中我们使用XMLHttpRequest对象异步发送请求,这种请求既可以是GET,也可以是POST,都可以带请求参数. 请求发送出去之后,服务器响应会在合适的时候返回,但是客户端不会自动加载这种异步响应,程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取    服务器响应,再通过DOM操作将服务器响应动态加载到当前页面中. XMLHttpRequest的用处是:提供与服务器异步通信的能力 2.

ajax学习笔记一

一.ajax介绍 1.ajax=Asychronous JavaScript and XML(异步的javascript和XML). 2.使网页在不重载的情况下与web服务器交换数据 3.ajax不是新的编程语言,而是一种使用现有标准的新方法 二.XMLHttpRequest对象 1.XMLHttpReuqest是ajax的基础 2.所有浏览器都支持XMLHttpRequest对象 3.XMLHttpRequest用于在后台于服务器交换数据.这意味着可以在不重载整个页面的情况下,对网页的某部分进