[ajax 学习笔记] ajax初试
Posted yangykaifa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[ajax 学习笔记] ajax初试相关的知识，希望对你有一定的参考价值。
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>
以上是关于[ajax 学习笔记] ajax初试的主要内容，如果未能解决你的问题，请参考以下文章