Heim > Artikel > Web-Frontend > javascript的ajax功能的概念和示例

javascript的ajax功能的概念和示例

高洛峰Original: 2016-10-17 09:48:301138Durchsuche

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）。

个人理解：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(&#39;submitBtn&#39;).addEventListener(&#39;click&#39;, clickSubmit);
        function clickSubmit() {
            makeRequest(&#39;./test.php&#39;);
        }

        var req = false;
        /**
         * 创建ajax请求
         * url 处理请求的php位置
         */
        function makeRequest(url) {
            req = false;
            //创建一个XMLHTPP实例
            if (window.XMLHttpRequest) { // ie9以上和w3c浏览器的对象
                req = new XMLHttpRequest();
                if (req.overrideMimeType) {
                    //如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 
                    //为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header. 
                    req.overrideMimeType(&#39;text/xml&#39;);
                }
            } else if (window.ActiveXObject) { // IE678专用
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert(&#39;new window.ActiveXObject() failed!&#39;);
                }
            }

            if (!req) {
                alert(&#39;Giving up :( Cannot create an XMLHTTP instance&#39;);
                return false;
            }
            //指定处理响应的JavaScript函数名. 
            req.onreadystatechange = alertContents;
            //测试传递 用户名和密码
            var user_name = document.getElementById(&#39;userName&#39;).value;
            var user_pwd = document.getElementById(&#39;password&#39;).value;
            //open(请求方式，准确的本域域名，是否异步);
            //GET或POST方式
            //----GET方式请求------
            //req.open(&#39;GET&#39;, url+&#39;?user_name=&#39;+user_name+&#39;&user_pwd=&#39;+user_pwd, true);
            //req.send(null);
            //----POST方式请求------
            //发送请求 如果open是POST方式可以发送字符串给服务器,也可以在open的第二个参数同时加上get传输
            ////req.open(&#39;POST&#39;, url+&#39;?get1=&#39;+user_name+&#39;&get2=&#39;+user_pwd, true);
            req.open(&#39;POST&#39;, url, true);
            req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
            req.send(&#39;user_name=&#39;+user_name+&#39;&user_pwd=&#39;+user_pwd);
        }
        
        /**
         * ajax请求的回调处理函数
         */
        function alertContents() {
            if (req.readyState == 4) {
                console.log(req.status);
                if (req.status == 200) {
                    alert(req.response);
                } else {
                    alert(&#39;There was a problem with the request.&#39;);
                }
            }

        }
    </script>
</body>
</html>

./test.php代码如下

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：javascript 核心语言 - 表达式和运算符Nächster Artikel：js中一些容易混淆的方法

In Verbindung stehende Artikel

Mehr sehen