【博学谷学习记录】超强总结，用心分享|Ajax

NeilWood
95 阅读6分钟

Ajax概念

异步的JavaScript和XML，在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax

JQuery中的Ajax

$.get()

//$.get(url,[data],[callback])
//参数解释：url：请求地址  data：请求时携带的数据 callback：请求成功时的回调函数
//JQuerey方式
  $('button').on('click',function(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                console.log(res)    //res 是服务端返回的数据
            })
    })
​
//原生js

$.post()

<script>
//$.post(url,[data],[callback])
//参数解释：url：请求地址  data：请求时携带的数据 callback：请求成功时的回调函数
 $('.but3').on('click',function(){
     $.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'无限恐怖',author:'z大',publisher:'人民出版社'},function(res){
                console.log(res)
         })
    })
​
</script>

$.ajax()

语法：
$.ajax({    
​
    type:''  //请求方式
    url：''  //请求的url地址
    data:{} //这次请求要携带的数据
    success:function(res){} //请求成功之后的回调函数
​
})

 $('.but4').on('click',function(){
            $.ajax({
                type:'GET',
                url:'http://www.liulongbin.top:3006/api/getbooks',
                data:{id:1},
                success:function(res){
                    console.log(res)
                }
            })
        })

 $('.but5').on('click',function(){
            $.ajax({
                type:'POST',
                url:'http://www.liulongbin.top:3006/api/addbook',
                data:{
                      bookname:'无限恐怖',
                      author:'z大',
                      publisher:'人民出版社'
                    },
                success:function(res){
                    console.log(res)
                }
            })
        })
​

form表单

form 表单用来采集数据

form标签的属性则是用来规定如何把采集到的数据发送到服务器

1.action

2.method，默认是get

3.enctype

4.target

表单的同步提交及缺点

1）form表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验差

2）form表单同步提交后，页面之前的状态和数据会丢失

解决方案，利用ajax负责提交

模板引擎

什么是模板引擎：它可以根据程序员指定的模板解构和数据，自动生成一个完整的HTNL页面

好处：

1.减少了字符串的拼接操作

2.使代码解构更清晰

3.使代码更易于阅读与维护

art-template

是一个简约、超快的模板引擎

aui.github.io/art-templat…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/template-web.js"></script>
</head>
<body>
    
    <script type="text/html" id="template-data">
     <h1>{{name}}-------{{age}}</h1>
    
        <!-- 直接拿值 -->
      {{@ text}}
​
    <div>
        <!-- if判断 -->
        {{if flag === 0}}
        flag的值是0
​
        {{else if flag === 1}}
            flag的值是1
        {{/if}}
    </div>
​
    <ul>
        <!-- 循环遍历 -->
        {{each hobby}}
        <li>索引是：{{$index}},循环项是：{{$value}}</li>
        {{/each}}
    </ul>
        <h3>{{@ regTime}}</h3>
        <!-- 调用方法 -->
        {{regTime | testFun}}
    </script>
​
​
    
<script>
    
    //方法
    template.defaults.imports.testFun = function(date){
​
        var y = date.getFullYear()
​
        var m = date.getMonth() + 1
​
        var d = date.getDate()
            return y+'-'+m+'-'+d
    }
​
​
​
    var data = {name:'zs',age:18,text:'<h3>测试原文输出</h3>',flag:0,hobby:['吃饭','睡觉','写代码'],regTime:new Date()}
    
    //创建template
    var htmlStr = template('template-data',data)
    console.log(htmlStr)
    document.write(htmlStr)
​
    
    
</script>
</body>
</html>

正则与字符串操作

1.基本语法

exec() 函数用于检索字符串中的正则表达式的匹配

如果字符串中有匹配的值，则返回该匹配值，否则返回null

//正则表达式.exec(str)
​
const pattern = /o/
const str = 'hello'
​
pattern.exec(str)
​

2.分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

        var str1 = '<div>我是{{name}}</div>'
        const reg = /{{([a-zA-Z]+)}}/
​
        // ['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]
        console.log(reg.exec(str1)) 
​

3.字符串的replace函数

replace（）函数用于在字符串中用一些字符替换另一些字符

let str2 = '<div>我是{{name}}</div>'
const reg1 = /{{([a-zA-Z]+)}}/
​
const patt = reg1.exec(str2)
​
str2 = str2.replace(patt[0],patt[1])
console.log(str2)

多次替换

let str3 = '<div>我是{{name}}今年{{age}}</div>'
const reg2 = /{{\s*([a-zA-Z]+)\s*}}/
let pat = null
​
while(pat = reg2.exec(str3)){
    str3 = str3.replace(pat[0],pat[1])
}
console.log(str3)

替换为真值

       let data = {name:'张三',age:'20'}
       let str3 = '<div>我是{{name}}今年{{age}}</div>'
const reg2 = /{{\s*([a-zA-Z]+)\s*}}/
let pat = null
​
while(pat = reg2.exec(str3)){
    str3 = str3.replace(pat[0],data[pat[1]])
}
console.log(str3)

ajax加强

XMLHttpRequest

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过他，可以请求服务器上的数据资源，之前所学的jq中的ajax函数，就是基于xhr对象封装出来的

<script>
    //1.创建xhr对象
    let xhr = new XMLHttpRequest()
​
    //2.调用 open 函数 参数：第一个：请求方式，第二个：请求地址
    //传参：地址？参数名=参数值 /问号后面的称为 查询字符串
    xhr.open('GET','http:www.liulongbin.top:3006/api/getbooks')
​
    //3.调用send函数
    xhr.send()
​
    //4.监听 onreadystatechange 事件
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
​
            //获取服务器响应的数据
            console.log(xhr.responseText)
​
        }
    }
</script>

XMLHttpRequest对象的readyState属性，用来表示当前ajax请求所处的状态，每个ajax请求必然处于以下状态中的一个

UTL编码与解码

//URL编码与解码
let name = '测试'
​
//编码
console.log(encodeURI(name))
​
//解码
console.log(decodeURI(name))

数据交换格式

1.xml

缺点：XML格式臃肿，和数据无关的代码多，体积大，传输效率低

在JavaScript中解析xml比较麻烦

2.json

JSON就是JavaScript对象和数组的字符串表示法，他的本质是字符串，是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析

JSON语法注意事项

  • 1.属性名必须使用双引号包裹
  • 2.字符串类型的值必须使用双引号包裹
  • 3.JSON中不允许使用单引号表示字符串
  • 4.JSON中不能写注释
  • 5.JSON的最外层必须是对象或数组格式
  • 6.不能使用undefined或函数作为JSON的值
//解码
console.log(decodeURI(name)))

//解码

console.log(decodeURI(name)))

json和js对象的关系：json是js对象的字符串表示法

json和对象的转换

var obj = json.parse(json)  
​
var json = json.stringify(obj)

序列化和反序列化

序列化：把数据对象转换为字符串的过程，叫做序列化，

反序列化：把字符串转换为数据对象的过程，叫做反序列化

XMLHttpRequest Level2的新特性

1.旧版XMLHttpRequest 的缺点

-1.只支持文本数据的传输，无法用来读取和上传文件

-2.传送和接受数据时，没有进度信息，只能提示有没有完成

2.新版XMLHttpRequest 的新功能

  • 1.可以设置Http请求的时限

  • 2.可以使用FormData对像管理表单数据

  • 3.可以上传文件

  • 4.可以获取数据传输进度信息

设置Http请求时限-timeout

let xhr = new XMLHttpRequest()
​
        //设置超时时间
        xhr.timeout = 3
        //设置超时后的处理函数
        xhr.ontimeout = function(){
            console.log('请求超时了')
        }
​
        
        xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')
        xhr.send()
​
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText)
            }
        }
​
​

FormData对像管理表单数据

 //创建 FormData 实例
        let fd = new FormData()
​
        //调用 append函数，向fd中追加数据
        fd.append('unmae','zs')
        fd.append('upwd','123456')
​
        let xhr1 = new XMLHttpRequest()
​
        xhr1.open('post','http://www.liulongbin.top:3006/api/formdata')
​
        // xhr1.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr1.send(fd)
​
        xhr1.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr1.responseText)
            }
        }

  let fd = new FormData(form)可以直接获得表单中的内容，参数就是目标表单的对象
  

ajaxStart 可以监听请求被发起,只能接在document上

ajaxStop可以监听请求结束，只能接在document上

  //监听到Ajax请求被发起
            $(document).ajaxStart(function(){
                $('#loading').show()
            })
​
            //监听到 Ajax 完成的事件
            $(document).ajaxStop(function(){
                $('#loading').hide()
            })
​

axios

axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest对象，axios简单易用

//get
document.querySelector('#btn1').addEventListener('click', function () {
    var url = 'http://www.liulongbin.top:3006/api/get'
    var paramsObj = { name: 'zs', age: 20 }
    axios.get(url, { params: paramsObj }).then(function (res) {
        console.log(res.data)
    })
})
//post
document.querySelector('#btn2').addEventListener('click', function () {
    var url = 'http://www.liulongbin.top:3006/api/post'
    var dataObj = { address: '北京', location: '顺义区' }
    axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
    })
})
//get
document.querySelector('#btn3').addEventListener('click', function () {
    var url = 'http://www.liulongbin.top:3006/api/get'
    var paramsData = { name: '钢铁侠', age: 35 }
    axios({
        method: 'GET',
        url: url,
        params: paramsData
    }).then(function (res) {
        console.log(res.data)
    })
})
//post
document.querySelector('#btn4').addEventListener('click', function () {
    axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
            name: '娃哈哈',
            age: 18,
            gender: '女'
        }
    }).then(function (res) {
        console.log(res.data)
    })
})

同源策略

什么是同源

如果两个页面的协议，域名和端口号都相同，则两个页面具有相同的源

什么是同源策略（same origin policy）

是浏览器提供的一个安全功能

什么是跨域

与同源相反，同源是指两个URL的协议、域名、端口一致，反之，则是跨域

出现跨域的根本原因：

浏览器的同源策略不允许非同源的URL之间进行资源的交互

浏览器对跨域请求的拦截

image.png 如何实现跨域数据请求

最主要的两种解决方案，分别是JSONP和CORS

JSONP：出现的早，兼容性好（兼容低版本IE），缺点是只支持GET请求，不支持POST请求

CORS：出现的比较晚，他是W3C标准，属于跨域Ajax请求的根本解决方案，支持GET和POST请求，缺点是不兼容某些低版本的浏览器

JSONP

JSONP实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据，但是<script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本
因此,JSONP的实现原理，就是通过<script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

<script>
    function success(data){
        console.log('得到了数据：')
        console.log(data)
    }
</script>
​
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>

jq中jsonp的实现过程

jQuery中的JSONP，也是通过<script>标签的src属性实现跨域数据访问的，只不过，jQuery采用的是动态创建和移除<script>标签的方式，来发起JSONP数据请求

  • 在发起JSONP请求的时候，动态向<header>中append一个<script>标签
  • 在JSONP请求成功以后，动态从<header>中移除刚才append进去的<script>标签
avatar
文章
阅读
粉丝