Web Api · 有关AJAX

2019-09-12 admin

AJAX全称:Asynchronous JavaScript and XML

1. 使用XMLHttpRequest创建
function success(text) {
    console.log('Success:' + text);
}

function fail(code) {
    console.error('Error Code: ' + code);
}

// 新建XMLHttpRequest对象
var request = new XMLHttpRequest();
// 状态发生改变时,执行回调函数
request.onreadystatechange = function() {
    // 判断请求是否完成
    if(request.readyState === 4) {
        // 判断响应结果
        if(request.status === 200) {
            // 请求成功,返回响应数据
            return success(request.responseText);
        } else {
            // 请求失败,返回状态码
            return fail(request.status)
        }
    } else {
        // Http请求还在继续中...
    }
}

// 发送Http请求
request.open('GET', '/api/test');
request.send();

alert('请求已发送,请等待响应...')

要点:

  • 常看浏览器是否支持XMLHttpRequest:window. XMLHttpRequest;
  • 创建XMLHttpRequest对象:var request = new XMLHttpRequest();
  • XMLHttpRequest对象的常用属性
*   onreadystatechange(请求状态是否改变)
*   readyState(请求状态码,4表示请求已完成)
*   status(响应状态码,200表示正确响应)
*   responseText(具体响应内容)
  • XMLHttpRequest对象的常用方法
*   open()(该方法有三个参数)
    
    
    *   参数1:指定请求方法(GET / POST / HEAD)
    *   参数2:指定URL(注意:该URL是**相对路径**)
    *   参数3:指定是否异步(true / false),默认为true
*   send()(真正发送请求,该方法有一个参数)
    
    
    *   若创建的POST请求,需要传递参数body
    *   若创建的GET请求,可以省略该参数,或传null
2. 使用ActiveXObject创建
// 只需要把XMLHTTPRequest()改为ActiveXObject('Microsoft.XMLHTTP')即可;
var request = new ActiveXObject('Microsoft.XMLHTTP');

因为ActiveXObject对象的属性和方法和XMLHTTPRequest对象是一样的:

// 因此可以整合标准写法和低版本IE上的写法
var request;
if(window.XMLHTTPRequest) {
    request = new XMLHTTPRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP')
}
3. 使用JQuery创建
var xhr= $.ajax('/api/test',{
    dataType: 'json'
});
// 不需要open() send(), 请求在创建完后即执行
// jQuery创建的xhr对象类似于一个Promise对象
xhr.done((data) => {
    console.log('Success: ' + JSON.stringify(data));
}).fail((xhr, status) => {
    console.error('Error: ' + xhr.status + ', Reason: ' + status);
}).always(() => {
    console.log('请求完成: 无论成功或失败都会调用');
});

要点:

  • $.ajax()方法包含两个参数
*   参数1:请求URL;
*   参数2:一个可选的setting对象;
  • setting配置
*   async:是否为异步请求,缺省为true;
*   method:http请求方法,缺省为'GET',还可设为'POST','PUT';
*   headers:额外的http请求头,需为object对象;
*   data:发送的数据,可以为字符串、数组或对象;
*   contentType:发送POST请求的格式,缺省为'application/x-www-form-urlencoded',也可设为'text/plain'、'application/json'等;
*   dataType:接受数据的格式,可以为'html'、'json'、'text'等,缺省值根据contentType自动判定;
  • jQuery ajax语法糖:
*   $.get():发送一个get请求,第二个参数可以为一个object,jq会自动拼接为string
    
    
    
    ```
    $.get('api/test',{
        name: 'huang xin',
        age: 18
    })
    // 等价于 /api/test?name=huang%xin&age=18
    ```
    
    
*   $.post():发送一个post请求,第二个参数缺省被序列化application/x-www-form-urlencoded
    
    
    
    ```
    $.post('api/test',{
        name: 'huang xin',
        age: 18
    })
    // 以 name=huang%xin&age=18 作为body发送post请求
    ```
    
    
*   $.getJSON():发送一个get请求,并返回一个JSON对象;
4. 使用promise创建
// ajax将返回promise对象
function ajax(method, url, data) {
    let request = new XMLHttpRequest();
    return new Promise((resolve,reject) => {
        request.onreadystatechange = () => {
            if(request.readyState === 4) {
                if(request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            } 
        }
        request.open(method,url);
        request.send(data);
    });
}
var p = ajax('GET','/api/test');
p.then((text) => {
    // ajax成功,获得响应内容;
    console.log('Success: ' + text);
}).catch((code) => {
    // ajax失败,获得状态码;
    console.error('Error Code: ' + code);
})

[转载]原文链接:https://segmentfault.com/a/1190000020371549

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74962.html

文章标题:Web Api · 有关AJAX

相关文章
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
Zepto Ajax 事件
当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。 ajaxStart (global):如果没有其他Ajax请求当前活跃将会被触发。 ajaxBeforeSend (data: xhr, options):再...
2017-04-26
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
响应式Web设计的9项基本原则
响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
回到顶部