05_前后端交互技术之Ajax案例讲解

本课目标

• 熟练掌握代码的封装
• 理解跨域的基本实现原理
• 理解XML格式数据结构

1. 写程序为什么需要封装

• 函数封装是一种函数的功能，它把一个程序员写的一个或者多个功能通过函数、类的方式封装起来，对外只提供一个简单的函数接口。 当程序员在写程序的过程中需要执行同样的操作时，程序员（调用者）不需要写同样的函数来调用，直接可以从函数库里面调用。

• 目的：化繁为简，不写重复的代码。

• 课堂案例：ajax调用过程函数封装.html

• 课堂案例：01.ajax调用封装测试.html

2. 数据渲染模板的使用

• 源码地址：https://github.com/XboxYan/web-templat e

• 课堂案例：02.template模板引擎基本用法.html

3. 关联搜索案例开发

• input事件：元素的 value 被修改时，会触发 input 事件

  • Element：input 事件 - Web API 接口参考 | MDN

• 课堂案例：03.关联搜索案例开发.html

4. 省市区三级联动案例开发

• 课堂案例：04.省市区联动.html

• 
  
  
  
      
      
      
      
  
      
      
      
  
      
  
  
  
  
      
  
          
          
  
              
              
            
                         
              
              
              
  
                  
                      请选择城市
                  
              
              
              
  
                  
                      请选择区县
                  
              
          
  
      
  
      
      
  
      
      
  
      
      
  
  
      
  
  
  

5. 什么是跨域访问

• 什么是跨域： 当一个请求url的协议 、 域名 、 端口三者之间的任意一个与当前页面url不同即为跨域。

当前页面url（所在服务器）	被请求页面url（所在服务器）	是否跨域	原因
http://120.78.190.136:8088/a.html	http://120.78.190.136:8088/test	否	同源（协议、域名、端口号相同）
http://www.testlocation.com/a.html	https://www.testlocation.com/test	跨域	协议不同（http/https）
http://120.78.190.136:8088/a.html	http://121.78.190.136:8088/test	跨域	域名（IP）不同（testlocation/baidu）
http://120.78.190.136:8088/a.html	http://blog.testlocation.com/test	跨域	子域名不同（www/blog）
http://120.78.190.136:8088/a.html	http://120.78.190.136:8099/test	跨域	端口号不同（8080/8088）

• 出于浏览器的同源策略限制：同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

• 课堂案例：05.非同源Ajax请求.html

6. 如何解决跨越问题

6.1 基于JSONP模式解决跨域

• JSONP(JSON with Padding)是资源格式JSON 的一种“使用模式”，可以让网页从别的服务器访问数据

• 课堂案例：06.使用jsonp向非同源服务器端请求数据1.html

• 课堂案例：07.使用jsonp向非同源服务器端请求数据2.html

• 课堂案例：08.使用jsonp向非同源服务器端请求数据3.html

• 
  
  
      
      
      
      
  
  
      基于JSONP获取服务端数据
  
      
  
      
      
  
  

• 课堂案例：09.封装jsonp方法.html

• 
  
  
  
      
      
      
      
      
  
  
  
      测试1
  
      
     
  
  
      
  
  
  

• 课堂案例：10.调用腾讯天气信息接口.html

6.2 基于CORS解决跨域

• 跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它源（域、协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

#以下是浏览器发送给服务器的请求报文：
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
​
#让我们来看看服务器如何响应：
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
​
服务端返回的 Access-Control-Allow-Origin 标头的 Access-Control-Allow-Origin: * 值表明，该资源可以被任意外源访问。
​
文档说明：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Access-Control-Allow-Origin": "*",
Access-Control-Allow-Methods: 'POST',
Access-Control-Allow-Headers: 'x-requested-with, accept, origin, content-type',
Access-Control-Max-Age:10000,
Access-Control-Allow-Credentials:true

• 课堂案例：11.CORS跨域资源共享.html

• 
  
  
  
      
      
      
      
      
  
  
  
      发送请求
  
      
  
  
  

• 课堂案例：12.CORS服务器端解决方案.html

• 
  
  
  
      
      
      
      
      
  
  
  
      发送请求
  
      
  
  
  

7.XML数据格式的理解（了解）

• XML：可扩展标记语言（英語：Extensible Markup Language，简称：XML）是一种标记语言

  • 和HTML是一样的，只不过HTML中所有的标签是预定义的，只需要去使用就可以了，但是XML没有预定义标签。就是所有的标签都需要自定义。

  • XML格式与JSON格式的区别：

    • 作用：都可以用来传递数据和作为配置文件

    • JSON格式比XML格式更加简洁。

• 课堂案例：13.xml格式数据解析.html

• 
  
  
  
      
      
      
      
      
  
  
  
  
      获取XML数据的格式