JS-Ajax

最新推荐文章于 2022-12-12 10:49:52 发布

Init1al-Z

最新推荐文章于 2022-12-12 10:49:52 发布

阅读量154

点赞数

分类专栏：学习感悟前端文章标签： jQuery

本文链接：https://blog.csdn.net/ezio23/article/details/96448864

版权

学习感悟同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

使用原生JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function refresh() {
            var xmlhttp;
            if (window.XMLHttpRequest) {//创建 XMLHttpRequest 对象
                xmlhttp = new XMLHttpRequest();
            }
            else {//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
            //当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
            xmlhttp.onreadystatechange = () => {
                /* onreadystatechange: 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
                 * readyState: 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                 * 0: 请求未初始化
                 * 1: 服务器连接已建立
                 * 2: 请求已接收
                 * 3: 请求处理中
                 * 4: 请求已完成，且响应已就绪
                 * status
                 * 200: "OK"
                 * 404: 未找到页面
                 */
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    /*如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
                     *responseText  : 获得字符串形式的响应数据
                     *responseXML   : 获得 XML 形式的响应数据
                     */
                    document.getElementById("text").innerText = xmlhttp.responseText;
                }
                else {
                    console.log("连接失败！");
                }
            }
            /*  open(method,url,async)
             *  规定请求的类型、URL 以及是否异步处理请求
             *  method  ：请求的类型；GET 或 POST
             *  url     ：文件在服务器上的位置
             *  async   ：true（异步）或 false（同步）
             */
            xmlhttp.open("GET", "ajax_info.txt", true);
            //将请求发送到服务器。
            xmlhttp.send();
            /*与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
              无法使用缓存文件（更新服务器上的文件或数据库）、向服务器发送大量数据（POST 没有数据量限制）、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠*/
        }
    </script>
    <title>JS-Demo</title>
</head>
<body>
<div id="text">使用AJAX更新页面</div>
<button id="ajax" onclick="refresh()">更新界面</button>
</body>
</html>
<!--ajax_info.txt start-->
<!--ajax_info.txt content: 新的内容 -->
<!--ajax_info.txt end-->

jQuery

jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象。
settings对象常用的属性有：

async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
method：发送的Method，缺省为’GET’，可指定为’POST’、'PUT’等；
contentType：发送POST请求的格式，默认值为’application/x-www-form-urlencoded; charset=UTF-8’，也可以指定为text/plain、application/json；
data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上， 如果是POST请求，根据contentType把data序列化成合适的格式；
headers：发送的额外的HTTP头，必须是一个object；
dataType：接收的数据格式，可以指定为 ‘html’、‘xml’、‘json’、‘text’ 等，缺省情况下根据响应的Content-Type猜测。

使用链式写法处理回调：

var jsxhr = $.ajax("url", 
{	// settings object
	dataType: "json"
}).done(function(data) {	// 只会被Response的200触发
	// jqXHR.done(function( data, textStatus, jqXHR ) {});
	ajaxLog("接受成功，数据为" + JSON.stringify(data));
}).fail(function(xhr, status) {		// 4XX,5XX都会触发
	// jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
	ajaxLog("失败: " + xhr.status + ", 原因: " + status);
}).always(function() {		// 总会触发，相当于Java的finally
	// jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); 
	ajaxLog("请求完成，无论成功还是失败都会调用");
);

什么是回调函数（callback）？

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
回调与同步、异步并没有直接的联系，回调只是一种实现方式，既可以有同步回调，也可以有异步回调，还可以有事件处理回调和延迟函数回调。

jQuery提供的常用方法：

get()
post()
getJSON()

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

Init1al-Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-Ajax

使用原生JS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript"> function refresh() { var xmlhttp; ...
复制链接

扫一扫

专栏目录