Concepts and examples of javascript's ajax functionality-JS Tutorial-php.cn

Concepts and examples of javascript's ajax functionality

高洛峰

Release： 2016-10-17 09:48:30

Original

1143 people have browsed it

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>

Copy after login

./test.php代码如下

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

Copy after login

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Concepts and examples of javascript's ajax functionality