首页 > 代码库 > AJAX

AJAX

2024-08-11 12:01:03   225人阅读

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

  • 执行过程：

  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


联系
我们