Ajax基础

Ajax

基本介绍

Ajax在不更新页面的情况下，实现局部刷新的效果

Ajax即Asynchronous Javascript And XML（异步JavaScript和 XML（规范的标签形式））

优点：

1.网页可以在不刷新的情况下就能和服务器通信

2.允许根据用户事件更新部分内容

缺点

1.没有浏览历史，不能后退

2.存在跨域问题，（同源）a.com不可向b.com通信

3.SEO不友好

Express 框架

//安装依赖
npm init --yes 
//安装express框架
npm i express
const clik = document.getElementById('a');

​    const result = document.getElementById('result')
	//鼠标移动到div出发事件,绑定事件

​    result.addEventListener("mouseover",function(){
	//创建对象
​      const xmr = new XMLHttpRequest();
	//初始化，设置url 和 请求类型
​      xmr.open('post','http://127.0.0.1:8000/server');
	//发送
​      xmr.send();
	//事件绑定
​      xmr.onreadystatechange = function(){
		//判断状态是否为完全加载 0 1 2 3 4 五个状态
​        if(xmr.readyState ===4){
			//判断请求是否成功
​          if(xmr.status === 200){
			//将请求体赋值给文本框，处理服务端返回结果
​            result.innerHTML = xmr.response;

​          }

​        }

​      }

​    })

开启本地服务

npm install http-server -g

http-server -c-1

node 1.js 运行js

安装nodemon工具，自动加载更新内容

npm install -g nodemon

nodemon 1.js

消除ie缓存，在url后边加上时间戳参数，浏览器认为url地址不同

‘utl?t=’ + Data.now()

原生ajax

const clik = document.getElementById('a');
const result = document.getElementById('result')
result.addEventListener("mouseover",function(){
    const xmr = new XMLHttpRequest();
    xmr.open('post','http://127.0.0.1:8000/server');
    xmr.send();
    xmr.onreadystatechange = function(){
        if(xmr.readyState ===4){
            if(xmr.status === 200){
                result.innerHTML = xmr.response;
            }
        }
    }
})

jQuery中ajax

<button>ajax</button>
<button>post</button>
<button>通用性ajax</button>
<script>
    $('button').eq(0).click(function(){
        //地址，参数，返回结果，返回数据结果
        $.get("http://127.0.0.1:8000/jquery_server",{a:100,b:200},function(data){
            console.log(data);
        },'json')
    })
    $('button').eq(1).click(function(){
        $.post("http://127.0.0.1:8000/jquery_server",{a:100,b:200},function(data){
            console.log(data);
        })
    })
    //通用ajax
    $("button").eq(2).click(function(){
            $.ajax({
                //url地址
                url:"http://127.0.0.1:8000/deley",
                //参数
                data:{a:100,b:200},
                //请求类型
                type:'GET',
                //返回数据类型
                dataType:'json',
                //成功的回调
                success:function(data){
                    console.log(data)
                },
                //延时操作
                timeout:2000,
                //错误的回调
                error:function(data){
                    console.log("出错了。。")
                }
            })
        })
</script>

//jQuery 服务
app.all('/jquery_server',(request,response)=>{
    //允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    let data = {name:'aaa',age:18}
    //返回json数据
    response.send(JSON.stringify(data))
})

axios

ajax工具库 文档地址：http://www.axios-js.com/docs/

 <script>
     // axios.defaults.basrURL=''
     //jquery点击方法click
     $('button').eq(0).click(function(){
         axios.get('http://127.0.0.1:8000/axios_server',{
             params:{
                 name:'111',
                 length:'18'
             }
         }).then(function(data){
             console.log(data)
         })
     })
     let btn = document.querySelectorAll('button');
     //js onclick 
     btn[1].onclick = function(){
         axios.post('http://127.0.0.1:8000/axios_server',{usename:'a',password:'b'},{
             params:{
                 name:'111',
                 length:18
             }
         }).then(data =>{
             console.log(data)
         })
     }
     //axios通用方法
     $('button').eq(2).click(function(){
         axios({
             //请求地址
             url:'http://127.0.0.1:8000/axios_server',
             //请求类型
             method:'POST',
             //请求参数
             params:{
                 name:1,
                 length:18
             },
             //请求头
             headers:{
                 a:100,
                 b:200
             },
             //请求体参数
             data:{
                 userNaem:'1',
                 password:'1111'
             }
         }).then(value =>{
             console.log(value)
         })
     })

</script>

//axios 服务
app.all('/axios_server',(request,response)=>{
    //允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*')

    let data = {name:'aaa',age:18}
    response.send(JSON.stringify(data))
})

jquery点击方法click

js onclick

fetch()函数发送ajax请求

$('button').eq(0).click(function(){
    //直接使用fetch
    fetch('http://127.0.0.1:8000/axios_server',{
        //请求方法
        method:'POST',
        //请求体
        body:'userName=admin&password=111',
        headers: {
            name:'lt'
        }
    }).then(data => {
        return data.json()
    }).then(data => {
        console.log(data)
    })
})

跨域

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源：域名，协议，端口号 必须相同

跨域：违背同源策略

解决跨域

JSONP（非官方） 只支持get请求 借助于

script引用有先后顺序,

<div id='result'></div>
//引用必须在id=result之后，跨域请求，非同源,本地访问http/.../2.js
<script src="http/.../2.js"></script>

//js
const data={
    name:'aa',
    length:18
}
console.log(data)
var handler = function(data){
    const result = document.getElementById('result');
    result.innerHTML = data.length;
}
handler(data)

字符串拼接

Es6中的${}新语法

这是es6中新增的字符串方法

//jsonp 服务
app.all('/jsonp-server',(request,response)=>{
    const data={
        name:'aa',
        length:18
    }
    console.log(data)
    let str = JSON.stringify(data)
    //Es6中的${}新语法,这是es6中新增的字符串方法
    response.send(`handler(${str})`)
})

jsonp解决跨域demo

用户名<input />
<p></p>
<script>
    const input = document.querySelector('input');
const p = document.querySelector('p');
function handler(data) {
    input.style.border = "solid 1px #f00";
    p.innerHTML = data.msg;
}
input.onblur = function () {
    // let userName = this.value;
    //创建script
    const script = document.createElement('script');
    //src
    script.src = 'http://127.0.0.1:8000/check-username';
    //将script放在body最后
    document.body.appendChild(script);
}
</script>

//检验用户是否存在
app.all('/check-username',(request,response)=>{
    const data={
        exist:'1',
        msg:'用户已经存在'
    }
    let str = JSON.stringify(data)
    //es6拼接
    response.send(`handler(${str})`)
})

jQuery发送jsonp请求

    <button>点击发送请求</button>
    <br><br>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function () {
            //jquery,jsonp 中url必须带callback参数，后端需接收并返回 ***
            $.getJSON('http://127.0.0.1:8000/jQuery-jsonp?callback=?', function (data) {
                console.log(data)
                $('#result').html(`
                名称：${data.name}
                aa:${data.length}
            `)
            })
        })
     </script>

//jQuery发送jsonp请求
app.all('/jQuery-jsonp',(request,response)=>{
    const data={
        name:'lt',
        length:['18','19','20']
    }
    let str = JSON.stringify(data)
    //接收callback函数值 ***
    let cb = request.query.callback;
    //es6拼接
    response.send(`${cb}(${str})`)
})

cors 跨域资源共享

官方解决跨域问题方案

跨域设置响应头

//允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*') //*代表全部，可换成单个地址