AJAX笔记

1.1 AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2XML

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签。
全部都是自定义标签，用来表示一些数据
比如说我有一个学生数据：

    name = "孙悟空";age = "18";gender = "男";

用XML表示：

<student>
    <name>孙悟空</name>
    <age>孙悟空</age>
    <gender>孙悟空</gender>
</student>
XML和HTML区别

XML 用于保存和传输数据
HTML 呈现数据

1.3 AJAX的特点

1.3.1 AJAX的有优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

1.3.2 AJAX的缺点

1.没有浏览历史，不能回退。
2.存在跨域问题(同源)。
3.SEO （搜索引擎优化）不友好。

1.4 AJAX的使用

1.4.1 核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

1.4.2 使用步骤
  1. 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
  2. 设置请求信息
    xhr.open(method, url); 
    //可以设置请求头，一般不设置
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. 发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
  1. 接收响应
//xhr.responseXML 接收 xml 格式的响应数据 
//xhr.responseText 接收文本格式的响应数据 
xhr.onreadystatechange = function (){ 
    if(xhr.readyState == 4 && xhr.status == 200){
    var text = xhr.responseText; console.log(text);
    } 
}
1.4.3 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
  解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题 xhr.open("get","/testAJAX?t="+Date.now());

1.4.4 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了。

二、jQuery 中的 AJAX

2.1 GET请求
$.get(url, [data], [callback], [type]) 
    url:请求的 URL 地址。 
    data:请求携带的参数。 
    callback:载入成功时回调函数。 
    type:设置返回内容格式，xml, html, script, json, text, _default。
2.2 POST请求
$.post(url, [data], [callback], [type]) 
    url:请求的 URL 地址。 
    data:请求携带的参数。 
    callback:载入成功时回调函数。 
    type:设置返回内容格式，xml, html, script, json, text, _default。
2.3 通用型AJAX
$.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });

三、跨域

3.1 同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。

3.2 如何解决跨域

3.2.1 JSONP

1.什么是JSONP？
  JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。
2.JSONP 怎么工作的？
  在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

<script src="http://localhost:8000/jsonp-server">
    //src返回的是一个函数调用，所以在服务端需要返回一个函数，与客户端的函数相应
</script>

3.JSONP的使用
  (1).动态的创建一个 script 标签

    var script = document.createElement("script");

(2).设置 script 的 src，设置回调函数

    script.src = "http://localhost:3000/testAJAX?callback=abc"; 
    function abc(data) { alert(data.name); };

(3).将 script 添加到 body 中

    document.body.appendChild(script);

(4).服务器中路由的处理

    router.get("/testAJAX" , function (req , res) {
    console.log("收到请求"); 
    var callback = req.query.callback; 
    var obj = {
        name:"孙悟空", age:18 
        }
        res.send(callback+"("+JSON.stringify(obj)+")"); 
    });

4.jQuery中的JSONP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result{
            width:300px;
            height:100px;
            border:solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

3.3.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. 什么是CORS？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源中

  1. CORS怎么工作的？

emsp;CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

  1. CORS 的使用

emsp;CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

主要是服务器端的设置：

    router.get("/testAJAX" , function (req , res) {
        //通过 res 来设置响应头，来允许跨域请求 //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
        res.set("Access-Control-Allow-Origin","*"); 
        res.send("testAJAX 返回的响应"); 
    });

3.3.3 接口代理

通过nginx服务器代理

作者：空空雨夜
链接：https://www.jianshu.com/p/c36b11b0438a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
utf-8">

一、原生AJAX

1.1 AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2XML

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签。
全部都是自定义标签，用来表示一些数据
比如说我有一个学生数据：

    name = "孙悟空";age = "18";gender = "男";

用XML表示：

<student>
    <name>孙悟空</name>
    <age>孙悟空</age>
    <gender>孙悟空</gender>
</student>
XML和HTML区别

XML 用于保存和传输数据
HTML 呈现数据

1.3 AJAX的特点

1.3.1 AJAX的有优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

1.3.2 AJAX的缺点

1.没有浏览历史，不能回退。
2.存在跨域问题(同源)。
3.SEO （搜索引擎优化）不友好。

1.4 AJAX的使用

1.4.1 核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

1.4.2 使用步骤
  1. 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest();
  2. 设置请求信息
    xhr.open(method, url); 
    //可以设置请求头，一般不设置
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. 发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
  1. 接收响应
//xhr.responseXML 接收 xml 格式的响应数据 
//xhr.responseText 接收文本格式的响应数据 
xhr.onreadystatechange = function (){ 
    if(xhr.readyState == 4 && xhr.status == 200){
    var text = xhr.responseText; console.log(text);
    } 
}
1.4.3 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
  解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题 xhr.open("get","/testAJAX?t="+Date.now());

1.4.4 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了。

二、jQuery 中的 AJAX

2.1 GET请求
$.get(url, [data], [callback], [type]) 
    url:请求的 URL 地址。 
    data:请求携带的参数。 
    callback:载入成功时回调函数。 
    type:设置返回内容格式，xml, html, script, json, text, _default。
2.2 POST请求
$.post(url, [data], [callback], [type]) 
    url:请求的 URL 地址。 
    data:请求携带的参数。 
    callback:载入成功时回调函数。 
    type:设置返回内容格式，xml, html, script, json, text, _default。
2.3 通用型AJAX
$.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });

三、跨域

3.1 同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。

3.2 如何解决跨域

3.2.1 JSONP

1.什么是JSONP？
  JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。
2.JSONP 怎么工作的？
  在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

<script src="http://localhost:8000/jsonp-server">
    //src返回的是一个函数调用，所以在服务端需要返回一个函数，与客户端的函数相应
</script>

3.JSONP的使用
  (1).动态的创建一个 script 标签

    var script = document.createElement("script");

(2).设置 script 的 src，设置回调函数

    script.src = "http://localhost:3000/testAJAX?callback=abc"; 
    function abc(data) { alert(data.name); };

(3).将 script 添加到 body 中

    document.body.appendChild(script);

(4).服务器中路由的处理

    router.get("/testAJAX" , function (req , res) {
    console.log("收到请求"); 
    var callback = req.query.callback; 
    var obj = {
        name:"孙悟空", age:18 
        }
        res.send(callback+"("+JSON.stringify(obj)+")"); 
    });

4.jQuery中的JSONP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result{
            width:300px;
            height:100px;
            border:solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

3.3.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. 什么是CORS？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源中

  1. CORS怎么工作的？

emsp;CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

  1. CORS 的使用

emsp;CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

主要是服务器端的设置：

    router.get("/testAJAX" , function (req , res) {
        //通过 res 来设置响应头，来允许跨域请求 //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
        res.set("Access-Control-Allow-Origin","*"); 
        res.send("testAJAX 返回的响应"); 
    });
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,667评论 5赞 472
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,361评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,700评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,027评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,988评论 5赞 361
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,230评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,705评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,366评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,496评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,405评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,453评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,126评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,725评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,803评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,015评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,514评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,111评论 2赞 341

推荐阅读更多精彩内容

  • AJAX笔记
    笔记连接: https://gitee.com/KKYVYE/ajax-learn[https://gitee.c...
    空空雨夜阅读 281评论 0赞 1
  • Ajax笔记
    1. Ajax 基础 1.1 传统网站中存在的问题 网速慢的情况下，页面加载时间长，用户只能等待 表单提交后，如果...
    Scincyc阅读 310评论 0赞 0
  • Ajax笔记
    一，1个HTTP请求一般由四部分组成： （1）GET请求：一般用于信息获取a.使用URL传递参数b.对所发送信息的...
    Leisure_blogs阅读 272评论 0赞 0
  • 前端之ajax笔记（三）
    本文由何小蒙[https://www.jianshu.com/u/b942c563d152]原创，如需转载要注明来...
    何小蒙阅读 136评论 0赞 0
  • Ajax笔记
    这种人我还带他出去玩么？有一次我和我朋友去动物园，就先去了老校区转转，结果就转到了艺术设计学院。去了人家的实验室，...
    键盘瞎阅读 1,304评论 10赞 43