search

博客列表 >javascript 中 ajax 请求和 jsonp 跨域的问题

javascript 中 ajax 请求和 jsonp 跨域的问题

存在
存在原创
2020年11月07日 02:36:22618浏览

一，ajax

1.ajax

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

ajax 能极大地提升用户体验，在开发中经常使用！

同步和异步
在了解 ajax 之前首先要明白两个概念：

  • 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求
  • 异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理

比如李二狗在房间烧水。
同步：在水烧开之前李二狗啥也不做就目不转睛的盯着水壶等它烧开。
异步：水烧开前李二狗顺便把地拖了一遍，还把碗也洗干净了。等水烧开发出‘呜呜’的声音，二狗便知道已经烧开了，可以过来把它提走。

XMLHttpRequest
XMLHttpRequest 是一个浏览器接口，使得 Javascript 可以进行 HTTP(S)通信。

最早，微软在 IE 5 引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax 操作因此得以诞生。

XMLHttpRequest 对象的主要属性：

  • xhr.readyState：XMLHttpRequest 对象的状态，等于 4 表示数据已经接收完毕。
  • xhr.status：服务器返回的状态码，等于 200 表示一切正常。
  • xhr.responseText：服务器返回的文本数据
  • xhr.responseXML：服务器返回的 XML 格式的数据
  • xhr.statusText：服务器返回的状态文本。

这个对象是浏览器提供的,是处理异步请求的宿主对象,而非 JS 内置对象
想了解这个对象的详情请点击:http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

2.ajax 请求方式

ajax 的 http 请求方式有两种：POST 和 GET。

2.1 GET 方式

请求流程：
a. 创建请求对象: new XMLHttpRequest()
b. 监听请求回调: onreadystatechange
c. 初始化请求参数: open(请求类型,请求地址,是否异步)
d. 发送请求: send()

响应：
a. 服务器: 返回 JSON
b. 前端: JSON.parse()解析 JSON 字符串

  • JS 代码
  1. // dom 获取按钮
  2. let btn = document.querySelector("button");
  3. //   console.log(btn);
  4. // 点击按钮发送请求
  5. btn.addEventListener("click", request, false);
  7. //建立ajax句柄
  8. const getHandle = new XMLHttpRequest();
  9. // 监听readystate 状态，用onreadystatechange方法监听
  10. getHandle.addEventListener("readystatechange", show, false);
  11. //设定请求方式；get|post
  12. getHandle.open("GET", "test1.php", true);
  14. //   点击按钮请求回调
  15. function request(ev) {
  16.   //发送ajax请求
  17.   // getHandle.send();
  18.   // 为了兼容一些老版的浏览器最好在方法里面加上个null
  19.   getHandle.send(null);
  20. }
  22. //   ajax请求状态监听
  23. function show() {
  24.   if (getHandle.readyState === 4) {
  25.     console.log(getHandle.responseText);
  26.   }
  27. }
  • PHP 代码
  1. // aja get请求脚本
  2. echo '成功返回数据';
  • 效果

ajax;

2.2 POST 方式

请求流程：
a. 创建请求对象: new XMLHttpRequest()
b. 监听请求回调: onreadystatechange
c. 初始化请求参数: open(请求类型,请求地址,是否异步)
d. 设置请求头: setRequestHeader()
e. 发送请求: send(data)

响应：
a. 服务器: 返回 JSON
b. 前端: JSON.parse()解析 JSON 字符串

注意：post 与 get 相比, 多了一步设置请求头。

  • 表单数据格式
    前端发送 JSON，后端如果 json 数据以表单数据类型发送,可用$_POST 接收，数据是常见表单名值对格式。

    • JS 代码
    1. // 运用ajax post 表单名值对格式（application/x-www-form-urlencoded）方式请求数据
    2. // 建立句柄
    3. const handle = new XMLHttpRequest();
    4. //   console.log(handle);
    6. // 监听状态 0，1，2，3，4
    7. handle.addEventListener("readystatechange", show, false);
    9. //设定请求方式
    10. handle.open("POST", "test2.php", true);
    12. //设置请求头
    13. handle.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    15. // 请求数据(伪数据)
    16. const user = {
    17.   name: "zhangshan",
    18.   age: 30,
    19. };
    20. //因为php无法识别js的数据格式，因此此处要把数据转为跨语言的json字符串格式
    21. let data = JSON.stringify(user);
    23. // console.log(data);
    25. // 发送ajax post请求
    26. handle.send(data);
    28. function show(e) {
    29.   if (handle.readyState == 4) {
    30.     console.log(handle.responseText);
    31.   }
    32.   // console.log(readstate);
    33. }
    • PHP 代码
    1. // ajax post请求脚本
    2. $data = key($_POST);
    3. echo $data;
    • 效果

    ajax;

  • json 数据格式
    如果 json 数组就是以 JSON 发送, php://input 流文件方式接收

    • JS 代码
    1. // 向服务器传输json格式数据
    2. // 建立句柄
    3. const handle = new XMLHttpRequest();
    5. // 监听事件 onreadystatechange 监听readystate属性状态 状态
    7. handle.addEventListener("readystatechange", change, false);
    9. //设置ajax 请求方式 post get
    11. handle.open("POST", "test3.php", true);
    13. //设置请求头
    14. handle.setRequestHeader("content-type", "application/json;charset=utf-8");
    16. //伪数据
    17. const data = {
    18.   name: "zhangshan",
    19.   age: 30,
    20. };
    22. //   转为json 字符串
    23. let jsonData = JSON.stringify(data);
    25. //   console.log(jsonData);
    26. //请求
    27. handle.send(jsonData);
    29. function change(obj) {
    30.   if (handle.readyState === 4) {
    31.     console.log(handle.responseText);
    32.   }
    33. }
    • PHP 代码
    1.   //ajax 传递json格式字符串脚本
    3.   //接收前端传来的json格式的数据.因为数据格式不是表单数据，所以不能用$_POST接收
    4.   // $user = $_POST;
    5.   //用php://input;
    6.   $user = file_get_contents('php://input');
    7.   echo $user;
    • 效果

    ajax;

  • FormData 封装表单数据数据
    FormData 数据不需要设置请求头，因为在 FormData 对象中已经封装了请求头信息

    • HTML 代码
    1. <form action="" onsubmit="return false">
    2.   <input type="text" name="username" value="李四" placeholder="用户名" />
    3.   <input type="password" name="psd" value="123456" placeholder="用户名" />
    4.   <button type="button">提交</button>
    5. </form>
    • JS 代码
    1. // 点击发送ajax
    2. let form = document.querySelector("form");
    4. // 获取button,表单数据
    5. let btn = document.querySelector("button");
    7. //button添加点击事件
    8. btn.addEventListener("click", sumbumit, false);
    10. //   ajax请求
    11. const handle = new XMLHttpRequest();
    12. // 监听readystate 状态，用onreadystatechange方法监听
    13. handle.addEventListener("readystatechange", show, false);
    14. //设置ajax 请求方式 post get
    15. handle.open("POST", "test4.php", true);
    17. //提交回调：FormData封装表单数据提交
    18. function sumbumit(ev) {
    19.   // 发送数据
    20.   handle.send(new FormData(form));
    21. }
    23. //   ajax请求状态监听
    24. function show() {
    25.   if (handle.readyState === 4) {
    26.     console.log(handle.responseText);
    27.   }
    28. }
    • PHP 代码
    1. // ajax FormData 返回
    2. print_r($_POST);
    • 效果

    ajax;

二，jsonp 跨域的问题

浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源.

1，原因

同源策略

1995 年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。

最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页”同源”。

所谓”同源”指的是”三个相同”。

  • 协议相同
  • 域名相同
  • 端口相同

举例：

  1. # 协议不同
  2. https://www.php.cn:443 /course/812.html
  3. http:// www.php.cn:443 /course/812.html
  4. # 端口不同
  5. http://www.php.cn:80 /wenda/165068.html
  6. http://www.php.cn:8080 /wenda/165068.html
  7. # 域名不同
  8. http://www.php.net:80 /wenda/165068.html
  9. http://www.php.cn:80 /wenda/165068.html

2，跨域原理

  • script标签允许跨域请求脚本: <script src="...."></script>
  • 动态生成<script>元素,并将需要跨域访问的 URL,赋值给 script 元素的 src 属性
  • 在跨域访问的服务器脚本中(如 php),将数据转为 json 格式,直接返回给前端处理就可以了

注意：在访问的 URL 中一定要带上 callback 回调函数，回调函数是在当前请求的 js 脚本中申明，并在 php 中调用返回数据。

3，实现

  • HTML 代码
    <button class="btn">跨域请求</button>
  • JS 代码
  1. // 由于浏览器同源策略，我们没法拿到其他网站的数据，为了规避它，我们运用jsonp跨域
  3. // 在脚本中生成 script 标签
  5. let btn = document.querySelector("button.btn");
  7. btn.addEventListener("click", creatScript, false);
  9. function creatScript(ev) {
  10.   // script请求地址
  11.   let url = "http://www.test.com/test1.php?id=1&callback=show";
  12.   //   生成script标签对象
  13.   let script = document.createElement("script");
  15.   script.src = url;
  17.   document.head.appendChild(script);
  18. }
  20. function show(data) {
  21.   console.log(data);
  22. }
  • PHP 代码
  1. $data = [
  2.     ['id'=>1,'name'=>'zhangshan','age' => 20],
  3.     ['id'=>2,'name'=>'lisi','age' => 30],
  4.     ['id'=>1,'name'=>'wanmazi','age' => 40],
  5. ];
  7. $id = $_GET['id'];
  9. //echo $id;die;
  11. $callback = $_GET['callback'];
  13. $ret;
  15. foreach($data as $value) {
  16.     if($value['id'] == $id) {
  17.         $ret = $value;
  18.     break;
  19.     }
  20. }
  22. $ret = json_encode($ret);
  24. echo "{$callback}({$ret})";
  • 效果

ajax;

三，总结

学习了 js 一段时间，感觉有点难度！主要是属性和对象太多了，还是要多敲代码，才能熟能生巧！

上一条：https免费证书（终身）申请和安装教程下一条：ajax异步请求和jsonp的跨域请求探讨
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
存在2020-11-07 15:47:081楼
谢谢老师夸奖！