原生js学习笔记8——Ajax基础

 

 

 

  什么是Ajax

  不刷新页面的情况下从服务器获取、提交数据的一种数据交互方式。

  Ajax使用步骤

  1、创建Ajax对象

  var httpRequest = new XMLHttpRequset可以创建一个Ajax请求对象。

  注意:浏览器的兼容问题

  IE6以及之前的IE不支持上边的创建爱你方法,这些版本的浏览器并没有集成Ajax,而是当做一个插件来处理,所以在创建时需要做兼容性处理:

if (window.XMLHttpRequest) {

    xmlHttp = new XMLHttpRequest;    

else{

    // IE5\6使用的是ActiveXObject对象

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

  2、配置Ajax的请求地址

  使用Ajax的open方法来配置地址

  open方法的三个参数:

  1. 数据提交方式

  2. 地址

  3. 是否异步请求

  示例xmlHttp.open ("GET", “http://127.0.0.1/index.php”, "true")

  数据的提交方式分为GET和POST两种方式

  GET:

1. 把提交的数据的名称、对应的值使用“?”拼接在url之后,如果有多个数据,则使用“&”连接2. 参数的长度有限制,不能太长(由于各个浏览器对长度要求不一样,所以不详细说),否则会被截取3. 只能传递字符串类型的参数。

  POST:

1. 把提交的数据封装在http头字段中。2. 参数长度可以在服务器端调整,因此理论上任意长度的参数都可以传递。3. 可以传递任意类型的数据

  异步与同步:

  异步(true):不会阻塞代码,ajax的工作未完成,继续执行后边的代码

  同步(false):阻塞代码,ajax的工作未完成,则等待ajax完成后在执行后边代码当后续的代码需要用到前边的请求数据时,需要用同步,否则用异步请求。

  3、发送请求

  xmlHttp对象的send方法发送上边的请求: 示例xmlHttp.send()。

  4、接收服务器返回的数据

  responseText:ajax请求返回的内容被存放在这个属性里

  readyState:ajax的工作状态

  on readystate change:当readyState发生改变时,会触发

  status:该属性代表服务器的工作状态(也就是http状态码):200表示请求成功

  readyState返回码含义

  存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  0: 请求未初始化

  1: 服务器连接已建立

  2: 请求已接收

  3: 请求处理中

  4: 请求已完成,且响应已就绪

  示例1:使用Ajax请求服务器中的一个新网页资源

<!DOCTYPE html><html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

 

        function localXMLDoc () {

            var xmlHttp;

            // 1. 创建XMLHttpRequest对象

            if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest;    

            } else{

                 // IE5\6使用的是ActiveXObject对象

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

 

            // 2. 每次readyState改变时,都会触发:onreadystatechange事件

            xmlHttp.onreadystatechange = function () {

        // readyState返回码含义//存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。//0: 请求未初始化//1: 服务器连接已建立//2: 请求已接收//3: 请求处理中//4: 请求已完成,且响应已就绪

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                    alert(xmlHttp.responseText);

                    document.getElementById(‘div‘).innerHTML = xmlHttp.responseText;

                } else{//                    alert(‘请求不成功,状态‘+xmlHttp.status);

                }

            }

 

            // 3. 创建请求事件

            xmlHttp.open("GET", "http://127.0.0.1/js.html",true);

            // 4. 发送请求

            xmlHttp.send();

        }

 

 

 

 

 

    </script>

    </head>

    <body>

        <button onclick="localXMLDoc()">点击加载</button>

 

        <div id = ‘div‘></div>

    </body></html>

  示例2:使用Ajax请求一个带参数的URL

<!DOCTYPE html><html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #search ,#hidden{

                display: inline-block;

                width: 200px;

                border: 1px solid black;

            }

 

        </style>

 

        <script type="text/javascript">

            function shoeHint(str) {

                var xmlHttp;

                // 如果传入的字符串小于0则直接返回,并清空输入框

                if (str.length == 0) {

                    document.getElementById(‘search‘).innerHTML = "";

                    return ;

                }

 

                // 创建XMLHttpRequest对象

                if (window.XMLHttpRequest) {

                    xmlHttp = new XMLHttpRequest();

                } else {

                    xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);

                }

                xmlHttp.onreadystatechange=function() {

                    // 根据返回码判断请求是否成功

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                    document.getElementById(‘hidden‘).innerHTML = xmlHttp.responseText;

                }

                }

 

 

                // 配置请求地址

                xmlHttp.open("GET", "https://127.0.0.1/hello.php?q="+str,true);

                //开始请求

                xmlHttp.send();

            }

 

            document.crea

        </script>

    </head>

    <body>

        <input type="text" name="search" id="search" value="" placeholder="" onkeyup="shoeHint(this.value)"/>

        <br /><div id = "hidden" >

 

        </div>

    </body></html>

  综合示例:使用Ajax加载新闻标题:
前端代码

<!DOCTYPE html><html>

    <head>

        <meta charset="UTF-8">

        <title></title>

 

        <script type="text/javascript">

            function getNews () {

                var httpRequest = null;

                httpRequest = new XMLHttpRequest();

 

                httpRequest.open("GET", "news.php/",true);

                httpRequest.send();

                httpRequest.onreadystatechange = function () {

 

                    if (httpRequest.status == 200 && httpRequest.readyState == 4) {

    //                        alert(httpRequest.responseText);

                        // 将JSON数据转换为普通数据

                             var r = JSON.parse(httpRequest.responseText);

                             //                             console.log(r[0].title);

                        var hml = ‘‘;

 

                        for (var i = 0; i < r.length; i++) {

                            // 拼接无序列表

                            hml += "<li>"+"<a href=‘#‘>" +r[i].title+"</a>"+"</li>";

                        }

                        document.getElementById(‘newsUl‘).innerHTML = hml;

                    }

                }

            }

        </script>

 

    </head>

    <body>

 

        <button id = "get" onclick="getNews()">获取新闻</button>

 

        <ul id = "newsUl">

 

        </ul>

    </body></html>

  服务端代码

<?php 

 

 

    $news = array(

 

        array(‘title‘ => ‘楼继伟财长:简单提高个税起征点不公平‘),

        array(‘title‘ => ‘[银行]回应国有银行经营持续恶化:不良贷款率的确在温和上升 今后还会上涨‘),

        array(‘title‘ => ‘[改革]称财税改革进度低于预期 营增改今年完成 难点在于纳税人多比较复杂‘),

        array(‘title‘ => ‘[债务]回应地方债增速加大:赤字率可适当提高 称借钱可买房 不能用于吃饭‘),

        array(‘title‘ => ‘[相关]个人综合税方案已经提交 谈"劳动合同法保护企业不足":财政部不修法‘),

 

    );

 

    echo json_encode($news);

 

 

?>

  GET请求注意问题!!

  1. Ajax的缓存问题:如果反复请求同一个URL,则第二次请求的内容是从浏览器缓存中拿到的,并不是真正服务器端的内容,所以为了避免服务器内容更改,但是客户端从缓存中取数据,拿不到新数据,我们可以在get请求中的参数末端添加一个随机数、或时间戳作为参数:‘http://127.0.0.1?username=zhangsan&password=12345&‘+ new Date()

  2. Ajax的乱码问题:如果请求参数中有中文,则会因为编码不统一导致后台认不出中文参数的情况,所以我们需要把中文参数进行编码:‘http://127.0.0.1?username=‘+encodeURI(‘全政‘)+‘&password=123456&‘+ new Date()

  POST请求注意问题!!

  1. POST请求的参数不是拼接在url之后,而是放在send()方法里:send(‘username=zhangsan&password=12345&‘+ new Date()‘)

  2. 请求编码问题:form表单提交时,默认的编码是:enctype="application/x-www-form-urlencoded" 而Ajax请求需要手动设置编码方式,在setRequestHeader(‘content-type‘, ‘pplication/x-www-form-urlencoded‘)设置。

  form提交数据示例:

<form action="" method="post" enctype="application/x-www-form-urlencoded">

 

        <input type="submit" value=""/></form>