正常我们都是用a标签来存放资源,href里就是存放给用户需要下载的资源,比如:
< a href= "../file/ajax.rar">下载</a>
这样用户也是能下载的,但并不是什么东西都能点击下载的,比如我在a标签方js文件、text文件等
<a href= "../file/ajax.js">下载</a>
点击时候并不是下载,而是打开
通常我们用a标签存资源的时候最好把文件压缩一下,利用服务器快速解压,大大的节省很多时间
所以我们可以利用JavaScript设置一下,如:
<input type="button" id="btn" value="点击下载">
btn.onclick =function (){
let link =document.createElement( "a");
link.download ="ajax";
link.href = "../file/ajax.js";
link.click();
}
//get用的是最多的,这里就用get
let xhr = new XMLHttpRequest();
//在H5的官方文档推荐的是使用onload事件去监听,我们这里就使用推荐的,其他的没什么太大的区别
xhr.onload =function (){
//判断一定要写,用来监听它的状态码
if(xhr.readyState ==4 && xhr.status ==200){
console.log(xhr.response)
}
}
xhr.open( "get", "../file/ajax.js");
xhr.send();
//当请求json格式的数据时候,默认返回的是字符串数据,我们可以
JSON.parse(xhr.response) 来转为对象
有时候后台会返回XML格式
let xhr = new XMLHttpRequest();
//在H5的官方文档推荐的是使用onload事件去监听,我们这里就使用推荐的,其他的没什么太大的区别
xhr.onload =function (){
//判断一定要写,用来监听它的状态码
if(xhr.readyState ==4 && xhr.status ==200){
console.log(xhr.responseXML)
}
}
xhr.open( "get", "../file/ajax.XML");
xhr.send();
你可以发现,它返回的是一个document,这时我们就可以利用DOM来操作它了
let dom =xhr.responseXML;
//假设我要获取ajax.XML的title
let title = dom.querySelectorAll("title");
let str ="";
title.forEach(function(item,index){
str += item.childNodes[0].nodeValue + "<br/>";
box.innerHTML =str
})
我们来模仿一个请求后台PHP
<?php
$arr =array('蓝馨',18);
//这里要注意,前后端交互不能发送对象这些东西,只能发送字符串,所以要编码一下;
echo json_encode($arr)
而我们前端接受到的是编码过的字符,上面$arr返回的是Unicode编码,我们可以用
JSON.parse(xhr.response)
来转换
什么意思呢?就是不能进行跨域的访问,因为后端没有开通权限,所以我们回到php那文件添加
//*代表任何人都能访问
header(string: "Access-Control-Allow-Origin : *")
这样就能请求到数据了,这就是后端能解决跨域的问题,后端不给访问我们前端是解决不了。
jsonp的本质就是给你返回一个函数的调用
function myData(data){
console.log(data)
}
function Jsonp(){
let s = document.creatElement("script");
s.src ="ajax.php?callback = myData";
document.body.appendChild(s)
}
<?php
header(string: "Access-Control-Allow-Origin : *");
$jsonp = $_GET['callback'];
$arr =array('蓝馨',18);
echo $jsonp."(".json_encode($arr).")";
大家都知道,H5的一些超前的原生API有很多的兼容性问题,用原生写相对来说较复杂,这时我们可以利用一些第三方的插件库:如jQuery
http://apps.bdimg.com/libs/jquer/2.1.4/jquery.min.js