Ajax学习笔记

最新推荐文章于 2024-08-30 19:40:45 发布

Ohh_ZH

最新推荐文章于 2024-08-30 19:40:45 发布

阅读量66

点赞数

文章标签： ajax 学习笔记

本文链接：https://blog.csdn.net/Ohh_ZH/article/details/131501113

版权

Ajax学习笔记

AJAX 的图像结果

1、原生Ajax

1.1 Ajax简介

Ajax全称Asynchronous JavaScript And XML，就是异步的 JS 和 XML

通过Ajax可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据

Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML简介

XML可扩展标记语言

XML被设计用来传输和存储数据

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

比如有一个数据：

name = “张三”；age = 18; gender = “男”；

用XML表示：

<student>
  <name>张三</name>
  <age>18</age>
  <gender>男</gender>
</student>

现已被JSON取代：

{name = "张三",age = 18,gender = "男"}

1.3 Ajax的特点

1.3.1 Ajax的特点

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

1.3.2 Ajax的缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好

1.4 Ajax的使用

1.4.1 核心对象

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

1.4.2 使用步骤

创建步骤
```
var xhr = new XMLHttpRequest();
```

设置请求信息

xhr.open(method,url);
//设置请求头，一般不设置
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

发送请求

xhr.send(body)  //get 请求不传body参数，只有post请求使用

接收响应

//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: 表示服务器数据已经完全接收，或者本次接收已经失败了

2、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。

3、跨域

3.1 同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域

3.2 如何解决跨域

3.2.1 JSONP

JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。

JSONP 就是利用 script 标签的跨域能力来发送请求的。

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)+")"); 
});

jQuery中的JSONP

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <ul id="list"></ul>
    <script type="text/javascript" src="./jquery-1.12.3.js"></script>
    <script type="text/javascript">
      window.onload = function () {
        var btn = document.getElementById('btn')
        btn.onclick = function () {
          $.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function
                    (data) {
            console.log(data);
            //获取所有的电影的条目
            var subjects = data.subjects;
            //遍历电影条目
            for(var i=0 ; i<subjects.length ; i++){
              $("#list").append("<li>"+
                                subjects[i].title+"<br />"+
                                "<img src=\""+subjects[i].images.large+"\" >"+
                                "</li>");
            }
          });
        }
      }
    </script>
  </body>
</html>

3.2.2 CORS

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

CORS 是什么？

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

CORS 怎么工作的？

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

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 返回的响应");
});

主要是服务器端的设置：

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 返回的响应");
});

Ohh_ZH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax学习笔记

XML可扩展标记语言XML被设计用来传输和存储数据XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据比如有一个数据：name = “张三”；age = 18;gender = “男”；用XML表示：< student > < name > 张三 </ name > < age > 18 </ age > < gender > 男 </ gender > </ student >
复制链接

扫一扫