关于java:及其封装下

学习指标

第一节 原生 Ajax 封装

1.1 封装函数

把独特的 同样的性能封装成一个函数，应用的时候 间接调用函数名就好了

$() 就是一个函数 带有参数的函数，调用 $()获取到以后的数据，return

<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'></div>

<div id=’div5′></div>

<script>

​ //JS 获取 div

​ var div1= document.getElementById(‘div1’);

​ var div2= document.getElementById(‘div2’);

​ var div3= document.getElementById(‘div3’);

var div4= document.getElementById(‘div4’);

function $(id){

​ return document.querySelector(id);

}

$(‘#div1’);

1.2 Ajax 封装

1.2.1 封装思路

1. 封装函数 myAjax() 申请参数：申请形式 申请地址 申请数据 回调函数

2.myAjax({type:”,url:”,data:{},success:fun})

3. 定义函数 function myAjax(jsonData)

4. 函数 封装 ajax 原生 ajax：数据拼接 data=’uname=qq&upsd=123′

get 形式：open(‘get’,url?data) send(null)

post 形式：open(‘post’,url) send(data)

1.2.2 原生的 ajax 申请

document.getElementById(‘btn’).onclick=function(){

​ var name=document.getElementById(‘name’).value;

​ var psd=document.getElementById(‘psd’).value;

​ if(window.XMLHttpRequest){

​ xhr = new XMLHttpRequest();//i7 支流浏览器都反对

​ }else if(window.ActiveXObject){

​ xhr = new ActiveXObject();//ie5 ie6

​ }

​ xhr.open(‘get’,’06get_json.php?uname=’+name,true);

​ xhr.send();

​ xhr.onreadystatechange=function(){

​ if(xhr.readyState==4 && xhr.status==200){

​ console.log(xhr.responseText);// 返回 xhr 字符串格局

​ console.log(JSON.parse(xhr.responseText));

​ }

​ }

​ }

1.2.3 封装代码

document.getElementById(‘btn’).onclick=function(){

var name=document.getElementById(‘name’).value;

var psd=document.getElementById(‘psd’).value;

​ myAjax({

​ type:’get’,

​ url:’05ajax.php’,

​ data:{

​ uname:name,

​ upsd:psd

​ },

​ success:function(aa){

​ console.log(aa);

​ }

​ })

​ }

function myAjax(jsonData){

​ var xhr=new XMLHttpRequest();

​ var newData=”;

if(jsonData.data){

​ var str=”;

​ var arr=[];

​ for(var key in jsonData.data){

​ str=key+’=’+jsonData.data[key];

​ arr.push(str);

​ }

​ newData=arr.join(‘&’);// 最终解决的数据拼接后果

}

if(jsonData.type.toLowerCase()==’get’){

​ xhr.open(‘get’,jsonData.url+’?’+newData,true);

​ xhr.send();

} else if(jsonData.type.toLowerCase()==’post’){

​ xhr.open(‘post’,jsonData.url,true);

​ xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded;charset=utf-8′);

​ xhr.send(newData);

}

xhr.onreadystatechange=function(){

​ if(xhr.readyState==4){

​ if(xhr.status==200){

​ jsonData.success(xhr.responseText);

​ }

​ }

}

}

本章作业

1. 封装 ajax

2. 应用封装好的 ajax 申请一个本地的 json 文件，并渲染页面

第二节 什么是跨域

2.1 跨域问题产生的起因

浏览器平安问题：浏览器的同源策略是浏览器上为安全性思考施行的十分重要的安全策略。从一个域上加载的脚本不容许拜访另外一个域的文档属性

以后的地址上来拜访浏览器上另外一个地址，不容许咱们拜访，浏览器阻止咱们拜访，平安

跨域，指的是从一个域名去申请另外一个域名的资源。即跨域名申请！跨域时，浏览器不能执行其余域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的平安限度。

跨域的严格一点来说就是只有协定，域名，端口有任何一个的不同，就被当作是跨域

拜访游侠客游览 分页网址：http://www.youxiake.com/searc…

【代码演示】

<script src=’js/myAjax.js’></script>

<script>

​ myAjax({

​ type:’get’,

​ url:’ http://www.youxiake.com/searc…

‘,

​ success:function(res){

​ console.log(JSON.parse(res));

​ }

​ })

​

</script>

2.2 同源策略

同源策略是由 Netscape 公司提出的一个驰名的安全策略，所有反对 JavaScript 的浏览器都会应用这个策略。所谓同源是指，域名，协定，端口雷同。当页面在执行一个脚本时会查看拜访的资源是否同源，如果非同源，那么在申请数据时，浏览器会在控制台中报一个异样，提醒回绝拜访。

2.3 为什么要跨域？

事实工作开发中常常会有跨域的状况，因为公司会有很多我的项目，也会有很多子域名，各个我的项目或者网站之间须要互相调用对方的资源，防止不了跨域申请。

本章作业

1. 什么是同源策略

2. 什么是跨域

第三节 跨域解决方案

1、通过 jsonp 跨域
2、document.domain + iframe 跨域
3、location.hash + iframe
4、window.name + iframe 跨域
5、postMessage 跨域
6、跨域资源共享（CORS）
7、nginx 代理跨域
8、nodejs 中间件代理跨域
9、WebSocket 协定跨域

3.1 后盾代理

浏览器阻止跨域申请，利于后盾去拜访服务器资源，而后本地拜访 php 后盾返回的数据。

<script src=”https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js”></script>

    <script>

​ $.ajax({

​ type:’get’,

​ url:’08houtai.php’,

​ dataType:’json’,

​ success:function(res){

​ console.log(res);

​ }

​ })

​

​ </script>

php 文件：

$res=file_get_contents(‘http://www.youxiake.com/xxx ‘);

echo $res;

3.2 iframe 跨域

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>

<script>

    document.domain = 'domain.com';

    var user = 'admin';

</script>

2.）子窗口：(http://child.domain.com/b.html)

<script>

    document.domain = 'domain.com';

    // 获取父窗口中变量

    alert('get js data from parent --->' + window.parent.user);

</script>

3.3 跨域资源共享（CORS）

一般跨域申请：只服务端设置 Access-Control-Allow-Origin 即可，前端毋庸设置

CORS 是一个 W3C 规范，全称是“跨域资源共享”（Cross-origin resource sharing）。

它容许浏览器向跨源服务器收回 XMLHttpRequest 申请，从而克服了 AJAX 只能同源发送申请的限度。

实现 CORS 次要在于 服务器 的设置，关键在于服务器 HTTP 响应报文首部 的设置。前端局部大抵还是跟原来发 AJAX 申请没什么区别，只是须要对 AJAX 进行一些相干的设置。

CORS 的两种申请

浏览器将 CORS 分为两种申请，一种是简略申请，另外一种对应的必定就是非简略申请

阮一峰：http://www.ruanyifeng.com/blo…

3.4 porxy 代理

原理：让代理服务器申请指标地址，因为申请是在服务端进行的，在服务端不存在跨域，从而解决跨域问题

实现：将原地址绑定在代理服务器下，让代理服务器发送申请。

3.5 jsonp 跨域

3.5.1 jsonp 跨域的原理

动态创建 script 标签, 利用 script 标签的 src 属性能够获取任何域下的 js 脚本, 通过这个个性(也能够说破绽), 服务器端不在返回 json 格局, 而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域

【代码演示】

<!– script 去申请资源 callback 函数 demo 函数 回调函数 –>

<script>

​ function demo(res){//res 形参 res 后盾返回给我的数据

​ console.log(res);

​ }

</script>

<script src='09jsonp.php?callback=demo'></script>

php:

<?php

// 接管函数变量名

$fun=$_GET[‘callback’];

// 比方 虚构数据 创立数组

$arr=array(‘msg’=>’ok’,’info’=>’ 虚构后盾数据 ’);

$obj=json_encode($arr);// 数组 – 字符串对象

// $obj=’hello’;

echo “$fun($obj)”;

?>

【代码演示】

<!– 百度搜寻框：http://suggestion.baidu.com/s…

​ cb 后盾接管的函数名字

​ callback: 前端定义的回调函数的名字

–>

<script>

​ function demo(res){

​ console.log(res);

​ }

</script>

 <script src='http://suggestion.baidu.com/su?cb=demo&wd=ajax'></script>

3.5.2 不受同源限度的状况

当然也有不受同源限度的状况存在，次要有以下列举的：

\1. script标签容许跨域嵌入脚本，稍后介绍的 JSONP 就是利用这个“破绽”来实现。

\2. img标签、link标签、@font-face不受跨域影响。

\3. video和 audio 嵌入的资源。

\4. iframe载入的任何资源。（不是 iframe 之间的通信）

\5. 、和 “ 的插件。

\6. WebSocket不受同源策略的限度。

本章作业

1. 跨域的解决形式有哪几个

2.jsonp 解决跨域的原理

第四节 jsonp 跨域

4.1 百度 jquery 跨域申请

【语法】

        $.ajax({

            type: "get",

            async: false,

            url: "http://localhost:8080/getdata.php",

            dataType: "jsonp",

            jsonp: "callback",// 传递给申请处理程序或页面的，标识 jsonp 回调函数名(个别为:callback)

            jsonpCallback: "GetData",//callback 的 function 名称

            success: function (data) {

                console.log(data);

            },

            error: function () {

                alert('fail');

            }

});

语法解析参数：

jsonp：
在一个 jsonp 申请中重写回调函数的名字。这个值用来代替在 ”callback=?” 这种 GET 或 POST 申请中 URL 参数里的 ”callback” 局部，
比方 {jsonp:’onJsonPLoad’} 会导致将 ”onJsonPLoad=?” 传给服务器。

jsonpCallback：
为 jsonp 申请指定一个回调函数名。这个值将用来取代 jQuery 主动生成的随机函数名。
这次要用来让 jQuery 生成一个独特的函数名，这样治理申请更容易，也能不便地提供回调函数和错误处理

【百度代码演示】

<script src=”https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js”></script>

    <script>

​ var val=’ 爱 ’;//input 外面获取的

​ $.ajax({

​ type:’get’,

​ url:’http://suggestion.baidu.com/s…’,

​ dataType:’jsonp’,// 数据类型 jsonp 格局

​ jsonp:’cb’,// 定义回调函数参数名字 后盾接管的函数名 默认 callback 如果后盾用的默认的 能够省略的

​ jsonpCallback:”demo”,// 能够省略：默认：jquery 随机数字()

​ success:function(res){

​ console.log(res);

​ }

​ })

​ </script>

4.2 jsonp 优缺点

4.2.1 长处

1. 它不像 XMLHttpRequest 对象实现的 Ajax 申请那样受到同源策略的限度，JSONP 能够逾越同源策略

2. 它的兼容性更好，在更加古老的浏览器中都能够运行，不须要 XMLHttpRequest 或 ActiveX 的反对；

3. 在申请结束后能够通过调用 callback 的形式回传后果。

将回调办法的权限给了调用方。这个就相当于将 controller 层和 view 层终于离开了。

我提供的 jsonp 服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续 view 操作都由调用者来本人定义就好了。

如果有两个页面须要渲染同一份数据，你们只须要有不同的渲染逻辑就能够了，

逻辑都能够应用同 一个 jsonp 服务。

4.2.2 毛病

 1 它只反对 GET 申请而不反对 POST 等其它类型的 HTTP 申请

 2 它只反对跨域 HTTP 申请这种状况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题。

3 jsonp 在调用失败的时候不会返回各种 HTTP 状态码。

 4 毛病是安全性。万一如果提供 jsonp 的服务存在页面注入破绽，即它返回的 javascript 的内容被人管制的。

那么后果是什么？所有调用这个 jsonp 的网站都会存在破绽。

于是无奈把危险管制在一个域名下…所以在应用 jsonp 的时候必须要保障应用的 jsonp 服务必须是平安可信的。

4.3 百度搜寻成果

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-VUzzChqP-1608259382066)(020802 及其封装(下)].assets/clip_image008.jpg)

本章作业

实现百度搜寻框