Ajax的使用和同源跨域的解决

最新推荐文章于 2023-05-30 01:51:36 发布

小白彡不白

最新推荐文章于 2023-05-30 01:51:36 发布

阅读量522

点赞数 2

分类专栏： Ajax

本文链接：https://blog.youkuaiyun.com/linglingzi001/article/details/107306711

版权

Ajax 专栏收录该内容

1 篇文章

订阅专栏

Ajax概念

Ajax 即“AsynchronousJavascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax请求的步骤

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象；

(2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息；

(3)设置响应HTTP请求状态变化的函数；

(4)发送HTTP请求；

(5)在请求成功的函数中

获取异步调用返回的数据；

使用JavaScript和DOM实现局部刷新。

XMLHttpRequest对象

(1)对象类型的API;

(2)在浏览器环境使用;

(3)用于客户端和服务端数据的传递和接收;

(4)用于请求XML数据（JSON/TEXT）。

readyState状态码

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

http状态码（status）

200：（成功）

403：（禁止）服务器拒绝请求

404：（未找到）服务器找不到请求的页面

408：（请求超时）服务器等候请求发生超时

500：（服务器内部错误）服务器遇到错误，无法完成请求

<script>
    	// 查询天气的接口
        function getWeather(city) {
            //1.创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            //open(type,url,async)
    		// 参数1 get请求或post请求
   			// 参数2 接口地址
    		// 参数3 异步请求或同步请求 默认为true 异步    false同步(通常不用)
            xhr.open("GET", "http://wthrcdn.etouch.cn/WeatherApi?city"+city, true);

            //两种请求方式onload/onreadystatechange
            //onload
            // xhr.onload = function() {
            //     console.log(xhr.readyState); //4
            //     document.querySelector("p").innerHTML = JSON.parse(this.responseText).body;
            // };
            //onreadystatechange
            xhr.onreadystatechange = function() {
                console.log(xhr.readyState);
                console.log(xhr.status);
                // 成功响应需要两个条件都满足
                if (xhr.readyState == 4 && xhr.status == 200) {//修改dom
                    console.log(this.responseText());
                }
            };

            //发送请求
            xhr.send(null)
        }
    </script>

如果是post请求需要加上请求头

发送数据在send()里接数据

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);

jquery里的Ajax

$.ajax({
    type: "get",// get或者post
    url: "abc.php",// 请求的url地址
    data: {},//请求的参数 可以用对象数据 jq会转换成字符串拼接在地址后面
    dataType: "json",//json写了jq会帮我们转换成数组或者对象
    success: function (data) { // 成功拿到结果放到这个函数 data就是拿到的结果
    },
    error: function () {//失败的函数
    },
    complete: function () {//不管成功还是失败 都会进这个函数
    }
})
// 常用
$.ajax({
    type: "get",
    url: "",
    data: {},
    dataType: "json",
    success: function (data) {
    }
})

其他

$.post(url,data,success,datatype) 只能发送post请求

$.get(url,data,success,datatype) 只能发送get请求

XML类型数据

    xml 是一种用来在不同的语言之间做数据传递的 跟json的功能差不多
    xml 相对于json 是一种重量级的传递方式 json就是一种轻量级的传递格式
    xml 跟 html相似 也是用标签来识别

    xml格式要求：
        1.xml里面只能写双标签
        2.标签名没有具体的规定 可以随便写
        3.也有文档声明 可以不写 但是如果写了 就必须是第一行
        4.必须有一个根标签(就是最外层的标签) 所有的内容都必须写在根标签里面

xml 和 document 可以理解为是同一类型的不同对象这就意味着document里面有的方法 xml里都有
注意：xml的操作跟html基本一样但是 xml只认标准语法如果是某个浏览器的语法那么就不支持例 IE的innerText

<root>
	<items>
		<name>张三</name>
		<age>12</age>
		<gender>男</gender>
		</items>
	<items>
		<name>李四</name>
		<age>12</age>
		<gender>女</gender>
	</items>
	<items>
		<name>王五</name>
		<age>18</age>
		<gender>男</gender>
	</items>
</root>

完整的查询天气接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {
            width: 1100px;
            list-style: none;
            margin: 50px auto;
            overflow: hidden;
        }
        h2 {
            text-align: center;
        }
        li {
            float: left;
            width: 200px;
            height: 150px;
            border: 1px solid;
            margin-right: 10px;
            background-color: #f8f8f8;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>

<body>
    <h1>天气查询</h1>
    <input type="text" placeholder="请输入城市" id="city">
    <input type="button" value="查询天气" id="btn">
    <h2 id="cityName"></h2>
    <ul id="ul">
        <li><p></p><p></p><p></p></li>
        <li><p></p><p></p><p></p></li>
        <li><p></p><p></p><p></p></li>
        <li><p></p><p></p><p></p></li>
        <li><p></p><p></p><p></p></li>
    </ul>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        var city = document.getElementById("city");
        var btn = document.getElementById("btn");
        var liList = document.querySelectorAll("li")
        btn.onclick = function () {
            $.ajax({
                type: "get",
                url: "http://wthrcdn.etouch.cn/WeatherApi",
                data: {
                    city:city.value
                },
                success: function (obj) {
                // 获取xml中的天气数据
                    var weatherList = obj.getElementsByTagName("weather");
                    // 渲染天气数据
                    document.getElementById("cityName").innerHTML = obj.querySelector("city").innerHTML;
                    for (var i = 0; i < weatherList.length; i++) {
                        liList[i].children[0].innerHTML = weatherList[i].children[0].innerHTML;
                        liList[i].children[1].innerHTML = weatherList[i].children[1].innerHTML;
                        liList[i].children[2].innerHTML = weatherList[i].children[2].innerHTML;
                    }
                },
                dataType:"xml"
            })
        }
    </script>
</body>
</html>

tianqi
返回的xml数据
在这里插入图片描述

json类型数据

json 是一种按照特殊规则来写的字符串
为什么要引入json格式的字符串
因为后端返回的数据前端不一定能解析所以为了方便服务器给浏览器的数据解析使用一种中间语
json 数据的规则
1.最外层必须使用{} 或[] 把数据包起来
2.[] 数组 {} 对象
{}包起来的是对象而且键必须使用双引号引起来

前端json字符串转对象或数组 JSON.parse()
数组或对象转JSON JSON.stringify()

        php语言转json字符串     json_encode(后端数据)
        json转php               json_decode(json字符串)

var obj = {name:"jack",age:12,gender:"男"}
var str1 = "aaaaa";     // 不是json字符串   没有使用{} []
var str2 = '{"name":"jack","age":12}'  // json
var str3 = '{name:"lucy",age:12}'   // 不是json 因为键没有使用双引号
var str4 = '[12,13]';    // json 表示数组
var str5 = "{'name':'lucy','age':12}"   // 不是json 因为键不是用双引号包起来

// console.log(JSON.parse(str1));
console.log(JSON.parse(str2));  // {name: "jack", age: 12}
// console.log(JSON.parse(str3));
console.log(JSON.parse(str4));  // [12, 13]
// console.log(JSON.parse(str5));

同源和跨域

    一个网站向另一个网站发送请求
    同源 两个网站之间 协议头 端口号 域名 三个都一样的情况下 就是同源
    跨域 两个网站之间 协议头 端口号 域名 三个有任意一个不一样 就是跨域

http://www.defg.com/1.html      http://www.defg.com/abc.html    同源
https://www.defg.com/1.html      http://www.defg.com/abc.html   跨域    协议头不一样
http://.defg.com/1.html      http://www.defg.com/abc.html       跨域    域名不一样
http://www.defg.com:80/1.html      http://www.defg.com:90/abc.html       跨域    端口号不一样

浏览器的同源策略使用ajax请求数据的时候只能访问同源的接口
跨域的影响 ：默认情况下浏览器不允许ajax访问跨域的接口

JSONP解决跨域原理

ajax 可以不跳转发送请求但是由于浏览器的同源策略不允许ajax访问跨域资源
script标签 可以请求跨域资源而且拿到跨域资源之后就可以直接执行
script 请求数据的步骤
1.先声明一个函数给函数传递一个参数

function fn(str) {
    console.log(str);
}

2.使用script的src属性去访问跨域资源并且在接口后面拼接一个参数 callback 属性值是我们声明的函数的名称

<!-- jsonp 就是利用了 src属性 支持跨域获取资源 -->
<script src="./data.php?callback=fn"></script>

php后端代码

<?php
    $fnName = $_GET['callback'];
    echo $fnName.'({"name":"jack","age":15})';
?>

script 引入外部文件的特点
引入外部文件之后就会根据js代码去解析
script 标签发送请求是把响应体当作js代码来执行

实例：查询菜名接口

        function fn(obj) {
        // 在回调函数里操作返回的数据
            console.log(obj);
        }
        btn.onclick = function () {
            // script 里面不能直接写标签 但是可以创建
            var spt = document.createElement("script");
            // 在接口后接一个callback=fn的回调函数
            spt.src = "https://api.jisuapi.com/recipe/search?keyword=" + menu.value + "&num=10&appkey=8cdc59d69f22d027&callback=fn"
            document.head.appendChild(spt);
        }

在jquery中对于可以接受jsonp类型的直接在dataType中传入jsonp即可

CORS : 跨域资源共享

默认情况下浏览器出于保护接口的目的采取同源策略不允许ajax访问跨域资源

    原理: 在响应头里面 设置允许所有的或者某些网站可以访问该服务器资源

// * 通配符 就是服务器告诉浏览器 我的这个资源可以让任何网站访问
header('Access-Control-Allow-Origin:*');