你的位置:首页 > Java教程

[Java教程]javascript的ajax功能的概念和示例


AJAX即“Asynchronous Javascript And XML”(异步JavaScript和

个人理解:ajax就是无刷新提交,然后得到返回内容。

对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面。

示例:

html代码如下

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax示例</title><style>  #loginForm {     border-collapse: collapse;  }  #loginForm,#loginForm td {    border:#550 1px solid;    text-align:center;  }</style></head><body>  <table id="loginForm">    <tr>      <td>用户名:</td>      <td><input type="text" id="userName"/></td>    </tr>    <tr>      <td>密码:</td>      <td><input type="password" id="password"/></td>    </tr>    <tr>      <td colspan=2><input id="submitBtn" type="submit" value="ajax提交"/></td>    </tr>  </table>  <script type="text/javascript" language="javascript">    document.getElementById('submitBtn').addEventListener('click', clickSubmit);    function clickSubmit() {      makeRequest('./test.php');    }    var req = false;    /**     * 创建ajax请求     * url 处理请求的php位置     */    function makeRequest(url) {      req = false;      //创建一个      if (window.// ie9以上和w3c浏览器的对象        req = new if (req.overrideMimeType) {          //如果服务器的响应没有          //为了解决这个问题, 如果服务器响应的header不是text/          req.overrideMimeType('text/');        }      } else if (window.ActiveXObject) { // IE678专用        try {          req = new ActiveXObject("Microsoft.");        } catch (e) {          alert('new window.ActiveXObject() failed!');        }      }      if (!req) {        alert('Giving up :( Cannot create an ');        return false;      }      //指定处理响应的JavaScript函数名.       req.onreadystatechange = alertContents;      //测试传递 用户名和密码      var user_name = document.getElementById('userName').value;      var user_pwd = document.getElementById('password').value;      //open(请求方式,准确的本域域名,是否异步);      //GET或POST方式      //----GET方式请求------      //req.open('GET', url+'?user_name='+user_name+'&user_pwd='+user_pwd, true);      //req.send(null);      //----POST方式请求------      //发送请求 如果open是POST方式可以发送字符串给服务器,也可以在open的第二个参数同时加上get传输      ////req.open('POST', url+'?get1='+user_name+'&get2='+user_pwd, true);      req.open('POST', url, true);      req.setRequestHeader("Content-type","application/x-www-form-urlencoded");       req.send('user_name='+user_name+'&user_pwd='+user_pwd);    }        /**     * ajax请求的回调处理函数     */    function alertContents() {      if (req.readyState == 4) {        console.log(req.status);        if (req.status == 200) {          alert(req.response);        } else {          alert('There was a problem with the request.');        }      }    }  </script></body></html>

 

./test.php代码如下

<?phpheader('content-type:text/html;charset=utf-8');var_dump($_POST);//获取到post传递的数据var_dump($_GET);

 

 

其它参考链接:http://www.jb51.net/article/41336.htm