(續(xù)) 上一節(jié)正則表達式
- 貪婪模式
<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內(nèi)置對象 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>
- 動態(tài)時鐘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.將時間變?yōu)樽址? 拼接起來
//2.將他們分割成數(shù)組
//3.數(shù)組遍歷 每個元素的內(nèi)容給到img的路徑
//只要小于10袄友，name就到數(shù)字前面補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")
//如何創(chuàng)使用ajax
//1.創(chuàng)建ajax核心對象
//2.建立與服務(wù)器的連接 open(method,url,是否異步 true)
//3.發(fā)送請求
//4.服務(wù)器端響應(yīng)
//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方式的時候需要設(shè)置一個請求頭 再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的區(qū)別
//1.get請求的參數(shù)字段是再url里面的
//2.安全性:post方法更安全
//3.請求的數(shù)據(jù)量：post請求的數(shù)據(jù)量更大
//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跨域問題
-
跨域問題的原理
跨域- 當(dāng)協(xié)議，子域名，主域名材部，端口號逸爵，任意一個不同時,就算作不同的域执俩。
- 不同域之間請求資源就算做跨域蚂维。
- Javascript出于安全性的考慮,不允許跨域調(diào)用其他頁面的對象背捌。簡單理解就是因為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>
