AJAX

一、ajax介绍

ajax 是前后端交互的重要手段或桥梁。它不是一个技术，是一组技术的组合。

ajax ：a：异步；j：js；a：和；x：服务端的数据。

ajax的组成：

异步的 js 事件
其他 js (处理解析数据)
XMLHttpRequest 对象
数据(txt、json、xml、html)

通过后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。也就是在不需要重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页不使用ajax，如果需要更新内容，必须重新加载整个页面。

ajax请求原理：创建一个网络请求对象 -> 发送连接请求 -> 发送请求数据 -> 检查网络请求对象的状态 -> 如果响应成功了 -> 浏览器接收返回数据并更新网页。接下来详细介绍对象的创建以及它的方法。

二、创建 XMLHttpRequest 对象

XMLHttpRequest 对象，用于后台与服务器之间的数据交换，意味着可以在不加载整个网页的情况下，更新部分内容或数据。现代浏览器基本都支持，但是低版本的IE不支持，如果我们考虑IE兼容问题创建对象的时候需要兼容创建。

考虑兼容时创建的对象：

var xhr ;
if( window.XMLHttpRequest ){ //检查浏览器是否支持XMLHttpRequest
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6  IE5
}

三、XMLHttpRequest的方法

3.1、open( )

设置请求的类型、请求接口、是否异步处理。

使用语法：open( method , url , async )

method：设置网络请求的类型，常用的 get 和 post
url：设置请求的接口也就是服务器的地址
async：true时表示异步，false表示同步

3.2、send( )

将请求发送到服务器。

使用语法：send( string )

string，只用在请求方式是post时，发送给服务器的数据。数据是键值对格式的，如："name=jack&pwd=1234"

使用发送方式不同的时候，传输数据添加方式也不同，所以我们介绍下分别为post和get时，数据是如何发送的？

3.3、提交方式

使用 get 方式提交

get发送请求时，需要传给后台的数据通过url来传递，多个参数之间使用 & 符号连接，使用时如下：

xhr.opn( "GET" , "1.php?name=hello&age=world" , true )
xhr.send()

使用 post 方式提交

使用 post 方式发送请求时，使用send来发送数据，有时需要设置数据格式，类似表单那样，此时可通过 setRequestHeader 设置发送的数据格式

xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded")

Content-type常见类型：

text/plain 纯文本，基本不怎么用
application/x-www-form-urlcoded 键值对格式传值，多个参数使用&连接
multipart/form-data 定界符，分隔各个数据，经常用于上传文件

四、readyState 属性

readyState 存有 XMLHttpRequest 的状态，它的值从 0-4 发生变化，分别代表的意义：

0：请求初始化，对象刚刚创建
1：服务器已连接
2：已发送，send发放已调用
3：已接收，此时只接收了响应(response)头部分
4：已接收，此时接收响应(response)体信息

每当 readyState 状态值发生改变时会，就会触发 onreadystatechange 事件，对应着每个状态值就会被触发五次。当状态值为 4 时表示网络请求响应完毕，就可以获取返回的值。

xhr.onreadystateChange = function(){
 if( xhr.readyState==4 ){
  if( xhr.status>=200 && xhr.status<300 || xhr.status==304 ){
   console.log("请求成功",xhr.responseXML)
  }else{
   console.log("请求失败")
  }
 }
}

跨域

跨域:浏览器为了用户的信息安全,网页中有一个网络中有一个网络请求技术:AJAX 在网络请求时,请求的网址和当前页面的网址不是同一台服务器,就会被拒绝接受服务器发送的数据

同源策略: 同源策略:浏览器的一种安全策略,值两个网址的协议,ip,port三者一样

1.同源(pathname不参与同源判断) www.baidu.com/news

www.baidu.com/home/goods

2.异源(协议不同) www.baidu.com/news

www.baidu.com/home/goods

3.异源(域名不同ip,port) www.baidu.com/news

www.baidu.cn/home/goods

4.同源(域名 ip,port一样) www.baidu.com/news //假设DNS解析为192.168.6.39:10086

https://192.168.6.39:10086/goods

列:

var router = require("./router.js");
var controller = require("./controller.js");
//注册路由
router.get("/ajax", function (req, res) {
    console.log(666);
    var obj = {
        name: "karen",
        age: 20
    }
    // res.setHeader("Access-Control-Allow-Origin", "*")
    var str = JSON.stringify(obj) //'{"name":"karen","age":20}'
    res.end(str)
})
router.get("/ajax1", controller.fm);
router.get("/zhuye.html", controller.fm)

<body>
    <div>
        <h1>物品</h1>
    </div>
    <a href="./car.html">car</a>

</body>

<body>
    <h1>这是购物车</h1>
</body>

<script>
    function fn() {


        var xhr = new window.XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", "http://192.168.6.39:10086/ajax", true)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(JSON.responseText);
                console.log(666);

            }
        }
    }
    window.onload = fn
</script>

CROS

后端设置数据包配置允许跨域资源共享

res.setHeader( 'Access-Control-Allow-Origin' , '*')

res.setHeader( 'Access-Control-Allow-Origin' , '可填具体网址')

var router = require("./router.js");
var controller = require("./controller.js");
//注册路由
router.get("/ajax", function (req, res) {
    console.log(666);
    var obj = {
        name: "karen",
        age: 20
    }
    res.setHeader("Access-Control-Allow-Origin", "*")
    var str = JSON.stringify(obj) //'{"name":"karen","age":20}'
    res.end(str)
})
router.get("/ajax1", controller.fm);
router.get("/zhuye.html", controller.fm)

<body>
    <div>
        <h1>物品</h1>
    </div>
    <a href="./car.html">car</a>

</body>

<body>
    <h1>这是购物车</h1>
</body>

<script>
    function fn() {


        var xhr = new window.XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", "http://192.168.6.39:10086/ajax", true)
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(JSON.responseText);
                console.log(666);

            }
        }
    }
    window.onload = fn
</script>

JSONP

1.前端网页中用ajax请求跨域服务器的网址会报跨域错误用script标签的src属性去请求跨域服务器的网址不会报跨域错误,但是会直接把请求过来的编码用v8引擎去运行

我们可以在后端写一个js引擎能识别的字符串发送给前端,这个字符串是这样的: ' fn({"name":"karen"}) ' 前端可以用script标签的src属性去请求这个网址,请求完毕以后 v8就会直接运行这个编码去调用fn函数,所以我们必须提前创建这个函数

3.函数的名称问题: 前端可以通过querystring把函数名以参数的形式发送给后端后端解析了以后直接拼接到数据中(比如那个fn)

列:

var fs = require("fs");
var router = require("./router.js");
var url = require("url");
var querystring = require("querystring")
router.get("/ajax1", function (req, res) {
    var obj = {
        books: ["css", "js", "node"]
    }
    var str = JSON.stringify(obj)
    var urlobj = url.parse(req.url).query
    var queryobj = querystring.parse(urlobj)
    console.log(111)

    res.end(`${queryobj.callback}(${str})`)
})

var router = require("./router.js")
router.static(__dirname + "/src")

<body>
    <h1>dsl rc</h1>
    <button onclick=fn()>点我</button>
    <script>
        function fn() {

            var name1 = "dsl" + new Date().getTime();
            window[name1] = function (arg) {
                console.log(arg)
            }
            // window.myfn = (arg) => {
            //     console.log(arg)
            // }
            var script1 = document.createElement("script")
            script1.src = `http://192.168.43.147:8080/ajax1?callback=${name1}`
            document.body.append(script1)
        }
    </script>
</body>

全栈4----(ajax,跨域,CROS,JSONP)