[ajax 学习笔记] ajax初试

时间：2022-08-14 15:39:33

ajax全称是：asynchronous javasctipt and xml。

1.为什么须要ajax？

一般web程序与server的交互是：页面发送请求等待server处理，server处理数据，用户页面刷新整个页面。从而完毕了一次交互。

假设用这样的同步方式进行多次这样的页面与server的交互，用户将会须要非常多时间去等待server处理。

ajax异步处理的思想是：当页面发送请求后，交给server处理。server处理的同一时候，页面无须等待能够进行其它的操作，当server处理完毕后，在当前页面显示结果，无须刷新整个页面。

2.ajax的简单实现

实现ajax须要用到javascript的XMLHttpRequest对象。

实现过程

1）创建对象（不同浏览器有不同的创建方法，一般须要考虑ie和非ie浏览器）

ie浏览器要用到ActiveXObject。

非ie浏览器可直接新建XMLHttpRequest对象实例。

2）发送请求。

发送请求前须要先建立一个与server的连接。

它须要的參数有发送类型、连接的url、异步连接状态值等。

> 发送类型：GET/POST等。

> url：连接地址 + ？ + 传送的值 （+ & + 传送的值..）   [这里是用的get方式]

> 异步连接状态值：true / false。

默觉得true。true表示异步连接。

在发送请求前还要建立一个返回函数。它是用来指定server响应后要运行的内容。

发送请求。

3）server响应函数

3.一个简单实例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script>

			//var xmlHttp = new XMLHttpRequest();

			/*创建XMLHttpRequest对象*/

			var xmlHttp = false;

			/*@cc_on @*/  //ie条件编译

			/*@if (@_javascript_version >= 5)

			try{

				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

			}catch(e){

				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

			}catch(e2){

				xmlHttp = false;

			}

			@end @*/

			if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){

				xmlHttp = new XMLHttpRequest();

			}

			function callServer(){

				//获取name和password值

				var name = document.getElementById("name").value;

				var password = document.getElementById("password").value;

				//推断name和password是否为空

				if((name == "null") || (name == "")) return ;

				if(password == "null" || password == "") return ;

				//创建要连接的url

				var url = "check.php?name=" + escape(name) + "&password" + escape(password);

				//建立一个server的请求

				xmlHttp.open("GET", url, true);

				//创建server完毕后执行的函数

				xmlHttp.onreadystatechange = updatePage;

				//发送请求

				xmlHttp.send(null);

			}

			function updatePage(){

				if(xmlHttp.readyState == 4){   //http就绪状态

					if(xmlHttp.status == 200){    //推断http状态代码

						var response = xmlHttp.responseText; //处理server响应

						document.getElementById("ajax-result").value = response;

					}else if(xmlHttp.status == 404){

						alert("Request url does not exist!");

					}else{

						alert("ERROR:status code is" + xmlHttp.status);

					}

				}

			}

		</script>

	</head>

	<body>

		<div id="form">

			<form method="get">

				name:<input type="text" id="name" onchange="callServer()"/><br>

				passwiord:<input type="text" id="password" onchange="callServer()"><br>

				result:<input type="text" id="ajax-result"/>

			</form>

		</div>

	</body>

</html>

相关文章