首页 > 代码库 > AJAX

AJAX

  • 局部刷新,减少请求中发送的数据

  • 执行过程:
  1. 使用JavaScript语言以及相关浏览器提供类库的功能,向服务端发送请求

  2. 当服务端处理完请求之后,自动执行某个JavaScript的回调函数

  • 请求和响应的整个过程是偷偷进行的,页面无任何感知

  • 利用AJAX可以做:

  1. 注册时,输入用户名自动检测用户名是否已经存在
  2. 登陆时,提示用户名密码错误
  3. 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除
  • 所以说AJAX的主战场是在前端

 

伪AJAX

首先来看一下一种用iframe标签模拟ajax请求

  • 利用iframe标签的src属性链接网站实现局部刷新

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div>        <p>请输入要加载的地址:<span id="current_time"></span></p>        <p>            <input id="url" type="text"/>            <input type="button" value="http://www.mamicode.com/刷新" onclick="LoadPage();"/>        </p>    </div>    <div>        <h3>加载页面位置:</h3>        <iframe id="iframePosition" style="width:100%;height:500px;"></iframe>    </div>    <script type="text/javascript">        window.onload = function(){            var myDate = new Date();            document.getElementById("current_time").innerText = myDate.getTime();        };        function LoadPage(){            var targetUrl = document.getElementById("url").value;            document.getElementById("iframePosition").src = http://www.mamicode.com/targetUrl;>

 

原生AJAX

  如今使用ajax其实就是使用浏览器(除了老旧的IE6,IE5)的XMLHttpRequest对象来完成

XmlHttpRequest对象的主要方法:

a. void open(String method,String url,Boolen async)   用于创建请求       参数:       method: 请求方式(字符串类型),如:POST、GET、DELETE...       url:    要请求的地址(字符串类型)       async:  是否异步(布尔类型) b. void send(String body)    用于发送请求     参数:        body: 要发送的数据(字符串类型) c. void setRequestHeader(String header,String value)    用于设置请求头     参数:        header: 请求头的key(字符串类型)        vlaue:  请求头的value(字符串类型) d. String getAllResponseHeaders()    获取所有响应头     返回值:        响应头数据(字符串类型) e. String getResponseHeader(String header)    获取响应头中指定header的值     参数:        header: 响应头的key(字符串类型)     返回值:        响应头中指定的header对应的值 f. void abort()     终止请求

 XmlHttpRequest对象的主要属性:

a. Number readyState   状态值(整数)    详细:      0-未初始化,尚未调用open()方法;      1-启动,调用了open()方法,未调用send()方法;      2-发送,已经调用了send()方法,未接收到响应;      3-接收,已经接收到部分响应数据;      4-完成,已经接收到全部响应数据; b. Function onreadystatechange   当readyState的值改变时自动触发执行其对应的函数(回调函数) c. String responseText   服务器返回的数据(字符串类型) d. XmlDocument responseXML   服务器返回的数据(Xml对象) e. Number states   状态码(整数),如:200、404... f. String statesText   状态文本(字符串),如:OK、NotFound...

 执行四步走:

  • 创建XMLHttpRequest对象

  • 定义回调函数(onreadystatechange和readyState=4)

  • 指定发送请求的方法和连接地址(post方式还要设置请求头)

  • 发送请求(send)

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <h1>XMLHttpRequest - Ajax请求</h1>    <input type="button" onclick="XmlGetRequest();" value="http://www.mamicode.com/Get发送请求" />    <input type="button" onclick="XmlPostRequest();" value="http://www.mamicode.com/Post发送请求" />    <script src="http://www.mamicode.com/statics/jquery-1.12.4.js"></script>    <script type="text/javascript">        //用户创建XMLHttpRequest对象        function GetXHR(){            var xhr = null;            if(XMLHttpRequest){                xhr = new XMLHttpRequest();            }else{                xhr = new ActiveXObject("Microsoft.XMLHTTP");            }            return xhr;        }        function XhrPostRequest(){            var xhr = GetXHR();            // 定义回调函数            xhr.onreadystatechange = function(){                if(xhr.readyState == 4){                    // 已经接收到全部响应数据,执行以下操作                    var data = http://www.mamicode.com/xhr.responseText;"/test/", true);            // 设置请求头            xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);            // 发送请求            xhr.send(‘n1=1;n2=2;‘);        }        function XhrGetRequest(){            var xhr = GetXHR();            // 定义回调函数            xhr.onreadystatechange = function(){                if(xhr.readyState == 4){                    // 已经接收到全部响应数据,执行以下操作                    var data = http://www.mamicode.com/xhr.responseText;"/test/", true);            // 发送请求            xhr.send();        }    </script></body></html>

 

jQuery AJAX

  • jQuery 不是生产者,而是大自然搬运工
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject
技术分享
            jQuery.ajax(...)                部分参数:                        url:请求地址                       type:请求方式,GET、POST(1.9.0之后用method)                    headers:请求头                       data:要发送的数据                contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")                      async:是否异步                    timeout:设置请求超时时间(毫秒)                 beforeSend:发送请求前执行的函数(全局)                   complete:完成之后执行的回调函数(全局)                    success:成功之后执行的回调函数(全局)                      error:失败之后执行的回调函数(全局)                                    accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型                   dataType:将服务器端返回的数据转换成指定类型                                   "xml": 将服务器端返回的内容转换成xml格式                                  "text": 将服务器端返回的内容转换成普通文本格式                                  "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。                                "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象                                 "jsonp": JSONP 格式                                          使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
View Code
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <p>        <input type="button" onclick="XmlSendRequest();" value=http://www.mamicode.com/‘Ajax请求‘ />"text/javascript" src="http://www.mamicode.com/jquery-1.12.4.js"></script>    <script>        function JqSendRequest(){            $.ajax({                url: "http://c2.com:8000/test/",                type: ‘GET‘,                dataType: ‘text‘,                success: function(data, statusText, xmlHttpRequest){                    console.log(data);                }            })        }    </script></body></html>

 

AJAX