Ajax基础

简单实现ajax请求

• 创建一个XMLHttpRequest实例

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

• 调用send的方法

• 注册监听

• 渲染页面

<script>
// 动态页面  静态页面
// async hronous  javascript and xml

// 创建一个XMLHttpRequest实例
var xhr = new XMLHttpRequest()
// 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.parse()：字符串的数据格式转化成json

• JSON.stringify()：将json转成字符串

var xhr = new XMLHttpRequest()
xhr.open('get','./数据.json',true)
xhr.send()
console.log(xhr);
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
    if (xhr.status===200) {
       var text=JSON.parse(xhr.responseText)
        document.body.innerHTML=text[0].name
    }
}
}

get携带数据

var xhr=new XMLHttpRequest()
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携带参数

var xhr=new XMLHttpRequest()
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携带的参数后端获取方式也不同

普通封装

function ajax(method, url, data, callback) {
var xhr = new XMLHttpRequest()
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', function fn(options) {
console.log(options);
})

对象形式封装

function ajax(options) {
var xhr = new XMLHttpRequest()
// name='zhangsan'& password=123
var obj = {
type: 'get',
url: './数据.json',
data: {},
"contentType": "application/x-www-form-urlencoded",
success: function (data) {
    console.log(data);
},
err: function (data) {
    console.log(data);
}
}
obj = Object.assign(obj, options)


var data = ''
for (let key in obj.data) {
data += key + "=" + obj.data[key] + '&'
}
data = data.substr(0, data.length - 1)
if (obj.type.toUpperCase() === 'GET') {
obj.url = obj.url + "?" + data
}
xhr.open(obj.type, obj.url, true)
if (obj.type.toUpperCase() === 'POST') {
var type = obj.contentType
xhr.setRequestHeader('content-type', type)
if (type === 'application/x-www-form-urlencoded') {
    xhr.send(data)
} else if (type === 'application/json') {
    xhr.send(JSON.stringify(data))
}
xhr.send(data)
} else {
xhr.send()
}
xhr.onload = function () {
if (xhr.readyState === 4) {
    if (xhr.status === 200) {
        obj.success(xhr.responseText)
    }
}
}
}
ajax({
url: './shu.json',
success: function (data) {
console.log(data);
}
})