关于java:及其封装下

学习指标

节数	知识点	要求
第一节（原生Ajax封装）	为什么函数封装	理解
封装思路	把握
封装ajax实现步骤	把握
第二节（什么是跨域）	同源策略和非同源策略	把握
跨域产生的起因	把握
第三节（跨域解决方案）	cors资源共享	把握
后盾代理	把握
jsonp原理以及实现	了解
第四节（跨域实例练习）	跨域获取百度搜寻接口数据	把握
模仿百度搜寻	把握

第一节原生Ajax封装

1.1 封装函数

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

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

<div id='div1'></div><div id='div2'></div><div id='div3'></div><div id='div4'></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>

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>

$.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>

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>

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)

本章作业

实现百度搜寻框

学习指标

第一节 原生Ajax封装

1.1 封装函数

1.2 Ajax封装

1.2.1 封装思路

1.2.2 原生的ajax申请

1.2.3封装代码

本章作业

第二节 什么是跨域

2.1 跨域问题产生的起因

【代码演示】

2.2 同源策略

2.3 为什么要跨域？

本章作业

第三节 跨域解决方案

3.1 后盾代理

3.2 iframe跨域

3.3 跨域资源共享（CORS）

3.4 porxy代理

3.5 jsonp跨域

3.5.1 jsonp跨域的原理

【代码演示】

【代码演示】

3.5.2 不受同源限度的状况

本章作业

第四节 jsonp跨域

4.1 百度jquery跨域申请

【语法】

【百度代码演示】

4.2 jsonp优缺点

4.2.1长处

4.2.2 毛病

4.3 百度搜寻成果

本章作业

第一节原生Ajax封装

第二节什么是跨域

第三节跨域解决方案