Ajax的应用场景

1．页面上拉加载更多数据
2．列表数据无刷新分页
3．表单项离开焦点数据验证
4．搜索框提示文字下拉列表

Ajax的运行环境

Ajax技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。
ajax
Web数据交互方式
实现了客户端与服务端之间的数据交互
我们使用js里边的ajax来实现前后台的数据交互
特点： 异步数据请求
体积小 请求速度快 加载速度
原理：
前台使用js调用原生ajax请求 调用后台接口对后台发起数据请求(Get/Post) 后台获取到前台发起的请求
使用对应的mysql数据库语句对数据库进行增删改查操作 将得到的数据库数据返回给前台页面 前台拿到数据进行页面渲染

//原生ajax
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function() {
    if(xhr.readyState==4 && xhr.status==200) {
        var data=xhr.responseText;   // 后台接口返回的后台数据
    }
}
xhr.open("get", url, true)   // true表示异步请求   false表示同步请求
xhr.send()

 var xhr=new XMLHttpRequest()
 var str=""
 var ul=document.querySelector("ul")
 var reg=/(w.h){1,}/
 xhr.onreadystatechange=function() {
     if(xhr.readyState==4 && xhr.status==200) {
         var res=JSON.parse(xhr.responseText);   // 后台接口返回的后台数据
         console.log(res.data.hot)
         for(var i=0; i<res.data.hot.length; i++) {
             str+=`
                 <li>
                     <img src="${res.data.hot[i].img.replace(reg, '128.180')}" alt="">
                     <div class="text">
                         <p class="title">${res.data.hot[i].nm}</p>
                         <p class="rating">观众评<span>${res.data.hot[i].sc}<span></p>
                         <p class="players">主演: ${res.data.hot[i].star}</p>   
                     </div>
                 </li>
             `
         }
         ul.innerHTML=str
     }
 }
 xhr.open("get", "https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=荥阳&ci=557&channelId=4", true)   // true表示异步请求   false表示同步请求
 xhr.send()

跨域

jquery ajax

原生ajax请求

原生js发起ajax请求
    fetch("https://cnodejs.org/api/v1/topics").then(function(response) {
        return response.json()
    }).then(function(res) {
        console.log(res)
    }).catch(function(err) {
        console.log(err)
    })

var obj={
    admin: 'zhangsan',
    password: "123456"
}
$("button").click(function() {
    fetch("http://localhost:3000/register", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(obj)
    }).then(response=> response.json()).then(res=> {
        console.log(res)
    })
    // $.post("http://localhost:3000/register", {
    //     admin: "xcr007",
    //     password: "124568"
    // },function(res) {
    //     console.log(res)
    // })
})

$.get("https://cnodejs.org/api/v1/topics", { 
    page: 1,
    limit: 50
}, function(res) {
    console.log(res)
        for(var i=0; i<res.data.length; i++) {
            str+=`
                <li>${res.data[i].title}</li>
            `
        }
        $("ul").html(str)
})

$.ajax({
    url: "https://cnodejs.org/api/v1/topics",
    type: "GET",
    data: {
        page: 1,
        limit: 40
    },
    success: function(res) {
        console.log(res)
        for(var i=0; i<res.data.length; i++) {
            str+=`
                <li>${res.data[i].title}</li>
            `
        }
        $("ul").html(str)
    },
    fail: function(err) {
        console.log(err)
    }
})

fetch请求

<script>
   fetch("http://1ocalhost:3000/list").then(res => {
       return res.json()
   }).then(res1 => {
       console.log(res1)
   }).catch(err=>{
       console.log(err)
   })
</script>

使用ajax请求接口渲染数据

if(localStorage.getItem("user")) {
    var str=''
    fetch("http://localhost:3000/restaurant").then(function(res){
        return res.json()
    }).then(function(res1) {
        console.log(res1)
        for(var i=0; i<res1.data.length; i++) {
            str+=`
                <li>
                    <img src="${res1.data[i].avatar}" alt="">
                    <p>${res1.data[i].restaurant_name}</p>
                    <p>${res1.data[i].address}</p>
                </li>
            `
        }
        document.querySelector("ul").innerHTML=str
    }).catch(function(err) {
        console.log(err)
    })
}else {
    window.location.href="./login.html"
}

ajax异步请求

post get put delete
post和get区别
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
3.get请求需注意缓存问题,post请求不需担心这个问题
4.post传输数据乜有限制 get传输时候1kb
5.get比post传输更快 POST比GET更稳定也更可靠
例如：
进行网站注册登录操作时候 一般使用post
获取一些信息的时候 一般使用get请求
修改网站一些信息的时候 我们可以使用put
删除网站一些信息的时候 我们可以使用delete

AJAX-express框架