Ajax简单基础

快速的实现交互式的动态页面

异步

XML被用来传输和存储数据的

Ajax优点：可以无需刷新页面与服务器端进行通信

允许你根据用户事件来更新部分页面内容

缺点：没有浏览历史，不能回退

存在跨域问题（同源）

seo（搜索引擎）不友好

HTTP协议【超文本传输协议】，按照规则来进行传输

请求报文

行 1、请求类型 （POST GET） 2、url 3、

头 名字：值

空行

体

响应报文

简单实现ajax请求

• 创建一个XMLHttpRequest实例

• 调用open方法，开始发送请求

• 调用send的方法

• 注册监听

• 渲染页面

<script>
// 动态页面  静态页面
// async hronous  javascript and xml
​
// 创建一个XMLHttpRequest实例
varxhr=newXMLHttpRequest()
// console.log(xhr);
// 调用open方法，开始发送请求
// 参数1：请求方式：get（请求）  post（携带数据 向下拉取）
// 参数2：请求地址 url
// 参数3：布尔值  ture---异步  false--同步
xhr.open('get','./数据.json',true)
// // 调用send的方法
xhr.send()
// 注册监听
// 0:初始化 
// 1：调用open（），但是请求还没有结束
// 2：调用send（），请求完成
// 3：正在处理数据
// 4：完成数据的处理
// console.log(xhr);
      注册监听
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
    if (xhr.status===200) {
        // 渲染页面
        console.log(xhr.responseText);
​
    }
}
}
​

​

转化数据格式

字符串的数据格式转化成json

JSON.parse()

将json转成字符串

JSON.stringify()

// 动态页面  静态页面
// async hronous  javascript and xml
​
// 创建一个XMLHttpRequest实例
varxhr=newXMLHttpRequest()
// console.log(xhr);
// 调用open方法，开始发送请求
// 参数1：请求方式：get（请求）  post（携带数据 向下拉取）
// 参数2：请求地址 url
// 参数3：布尔值  ture---异步  false--同步
xhr.open('get','./数据.json',true)
// // 调用send的方法
xhr.send()
// 注册监听
// 0:初始化 
// 1：调用open（），但是请求还没有结束
// 2：调用send（），请求完成
// 3：正在处理数据
// 4：完成数据的处理
console.log(xhr);
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
    if (xhr.status===200) {
        // 渲染页面
       vartext=JSON.parse(xhr.responseText)
        document.body.innerHTML=text[0].name
    }
}
}

get携带数据

varxhr=newXMLHttpRequest()
xhr.open('get','./数据.json?name=z&password=123',true)
xhr.send()
xhr.onreadystatechange=function(){
    if (xhr.readyState===4) {
        if (xhr.status===200) {
            console.log(xhr.responseText);
        }
    }
}

post携带参数

varxhr=newXMLHttpRequest()
xhr.open('post','./数据.json',true)
xhr.send('name=123&password=123')
xhr.onreadystatechange=function(){
    if (xhr.readyState===4) {
        if (xhr.status===200) {
            console.log(xhr.responseText);
        }
    }
}

get和post区别：

• 请求携带参数不同，

• 携带参数的大小不同，get大约2kb，post比get大很多

• get和post安全性不同，get有缓存，post没有

• get和post携带的参数后端获取方式也不同

封装
functionajax(method, url, data, callback) {
varxhr=newXMLHttpRequest()
if (method.toUpperCase() ==='GET') {
    // xhr.send()
    url=url+"?"+data
}
xhr.open(method, url, true)
if (method.toUpperCase() ==='POST') { xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(data)
} else {
    xhr.send()
}
xhr.onload=function () {
    if (xhr.readyState===4) {
        if (xhr.status===200) {
            callback&&callback(xhr.responseText);
        }
    }
}
}
ajax('post', './数据.json', 'name=zhangswan', functionfn(options) {
console.log(options);
})