原生JavaScript实现AJAX

来源：互联网发布：mysql 缓存编辑：程序博客网时间：2024/04/29 19:03

ajax是什么？
AJAX即 “Asynchronous Javascript And XML”，（异步Javascript 和 XML），指一种创建交互式网页应用的网页开发技术。
粗略的来说，AJAX技术，实现的是局部刷新页面，从而提高用户的操作体验。

普通的网页交互，通常是这样浏览器与服务器直接交互的，用户将数据提交给服务器后，服务器处理后，返回给浏览器，这样造成的结果的是，用户将数据提交给服务器，需要等待服务器返回结果后，才能进行下一步操作。如果使用AJAX以后，用户可以部分将部分数据先提交给服务器，服务器处理后，直接返回给浏览器（不用刷新）。

目前AJAX主要使用在：
1、动态加载数据，例如：树形菜单，联动菜单（省市联动）……
2、表单认证（用户在不提交表单前，就验证）……
3、电子商务应用（购物车）……
4、数据，页面的局部刷新

AJAX工作原理：
我们可以将AJAX的工作原理分为4条线
如下图：

第一条线：浏览器将请求发送给AJAX引擎
第二条线：AJAX引擎将浏览球的请求发送给服务器，让服务器处理
第三条线：服务器将处理的结果按一定个格式（文本，XML，JSON）返回给AJAX引擎

第四条线：浏览器接收到AJAX从服务器的数据，再按一定的规则，输出到浏览器上

代码实现
客户端GET方法提交数据，服务器返回文件格式数据的demo

//register.php<html><head><title>ajax用户注册</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css">body{    font-family: "Microsoft JhengHei";}label{    font-weight: bolder;    font-size: 14px;}input.check{    border-width: 0;    color: red;    font-family: "Microsoft JhengHei";    font-weight: bolder;}</style> <script type="text/javascript">/*** 创建ajax引擎** 为不同浏览器做兼容*/function getXmlHttpObject(){        //第一根线    var xmHttpRequset;     if(window.ActiveXObject){        //window.alert("ie")        xmlHttpRequset = new ActiveXObject("Microsoft.XMLHTTP");    }else{           //window.alert("ff")        xmlHttpRequset = new XMLHttpRequest();    }       return xmlHttpRequset;} var myXmlHttpRequset = getXmlHttpObject(); //申明myXmlHttpRequset为全局变量 function checkName(){        //第二根线        if(myXmlHttpRequset){                var myurl = "/ajax/learn/registerpro.php?username=" + $("username").value; //这里为了方便用到了下面申明实现的$函数        myXmlHttpRequset.open("get", myurl, true);//.open("发送方法(get or post)", url, "是否异步(ture为异步，false为同步)")                //回调函数        myXmlHttpRequset.onreadystatechange = solve;//这里调用了下面申明实现的solve函数，Ps：不要加括号，加括号表示将返回值赋给左边变量，而非调用        //发送数据        myXmlHttpRequset.send(null); //因为是GET方法，所以.send(null)     }else{        //window.alert("error");    } } function $(id){    return document.getElementById(id);}  //回调函数function solve(){        //第三、四根线    if(myXmlHttpRequset.readyState == 4){        $('res').value = myXmlHttpRequset.responseText;    }}</script> </head><body>    <form action="registerpro.php" method="post">        <label>账号</label>        <input type="text" name="username" id="username" />        <input type="button" name="check" id="check" value="检查用户名" onclick="checkName()"/>        <input class="check" type="text" id="res" readonly="readonly"/>        </br>        <label>密码</label>        <input type="text" name="password" id="password" />        <input type="submit" name="submit" id="submit"/>    </form></body></html>

//registerpro.php$username = $_GET['username'];if($username == "lisheng"){    echo "用户名不可用";}else{    echo "用户名可用";}

0 0