Day10 JS & ajax
2018-07-03 本文已影响0人
小章鱼Milo
(续) 上一节正则表达式
- 贪婪模式
<script >
let a="123456abc"
let reg=/\d{3,6}/
//贪婪模式：默认取样式中最大的值
console.log(a.replace(reg, "*"))
//懒惰模式：取样式中最小值
let noReg=/\d{3,6}?/
console.log(a.replace(noReg,"*"))
</script>
1. JS内置对象 Date
<script >
let oDate=new Date()
let year=oDate.getFullYear()
let month=oDate.getMonth()+1 //月份要+1 从0开始的
let day=oDate.getDay()
let date=oDate.getDate()
let hour=oDate.getHours()
let min=oDate.getMinutes()
let second=oDate.getSeconds()
console.log(oDate)
console.log(year)
console.log(month)
console.log(day)
console.log(date)
console.log(hour)
console.log(min)
console.log(second)
</script>
- 动态时钟Demo
<body>
<div>
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
</div>
<script >
function showTime() {
let clocks=document.getElementsByTagName("img")
let oDate=new Date()
let hour=oDate.getHours()
let minute=oDate.getMinutes()
let sec=oDate.getSeconds()
//1.将时间变为字符串 拼接起来
//2.将他们分割成数组
//3.数组遍历 每个元素的内容给到img的路径
//只要小于10，name就到数字前面补0
function add(time){
if (time<10){
return "0"+time;
}else{
return time+""
}
}
let allTime=add(hour)+add(minute)+add(sec)
console.log(allTime)
for (let i=0;i<allTime.length;i++){
clocks[i].src="images/"+allTime[i]+".png"
}
}
showTime();
setInterval(showTime,1000)
</script>
</body>
2. AJAX
-
2.1 JS原生AJAX
<script >
let test=document.getElementById("test")
//如何创使用ajax
//1.创建ajax核心对象
//2.建立与服务器的连接 open(method,url,是否异步 true)
//3.发送请求
//4.服务器端响应
//get
let xhr=new XMLHttpRequest()
let url="https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/getTest"
xhr.open("get",url,true)
xhr.send()
xhr.onreadystatechange=function () {
if (xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText)
let resData=JSON.parse(xhr.responseText)
test.innerHTML=resData.data.content;
}
}
//post
//使用原生post方式的时候需要设置一个请求头 再open方法和send方法之间
let postUrl="https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/postTest"
xhr.open("post",postUrl,true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send()
xhr.onreadystatechange=function () {
if ( xhr.status==200) {
if (xhr.readyState==4){
console.log(xhr.responseText)
let postData=JSON.parse(xhr.responseText)
console.log(postData.data.content)
}
}else{
document.body.innerHTML=xhr.status;
}
}
//get和post的区别
//1.get请求的参数字段是再url里面的
//2.安全性:post方法更安全
//3.请求的数据量：post请求的数据量更大
//4.get速度更快
</script>
</body>
-
2.2 Jquery AJAX
记得引用 Jquery
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
$.ajax({
method:"get",
url:"https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/getTest",
dataType:"json",
success:function (res) {
console.log(res)
},
error:function (xhr) {
document.body.innerHTML=xhr.status
}
})
- Jquery get
<script >
let url="https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/getTest";
$.get(url, function (data) {
console.log(data)
}).fail(function (data) {
console.log(data.status)
})
</script>
- Jquery post
<script >
let url="https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/postTest"
$.post(url, function (data) {
console.log(data)
})
</script>
-
2.3 Axios
- 引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- get方法
<script >
let url="https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/getTest"
axios.get(url).then(function (success) {
console.log(success)
})
.catch(function (error) {
console.log(error)
})
</script>
- post 方法
let postUrl="https://www.easy-mock.com/mock/5b3ae092d294426e05198b4c/ajaxTest/postTest"
axios.post(postUrl).then(function (success) {
console.log(success)
})
.catch(function (error) {
console.log(error)
})
3.Ajax跨域问题
-
跨域问题的原理
跨域
- 当协议，子域名，主域名，端口号，任意一个不同时,就算作不同的域。
- 不同域之间请求资源就算做跨域。
- Javascript出于安全性的考虑,不允许跨域调用其他页面的对象。简单理解就是因为Javascript同源策略的限制,a.com域名下的js无法操作b.com域名下的对象。
-
解决跨域
jsonp
<script>
let url="https://api.douban.com/v2/book/search?q=javascript&count=1";
$.ajax({
type:"get",
url:url,
dataType:"jsonp",
success:function (data) {
console.log(data)
}
})
</script>
