js的第22天（ajax阿贾克斯）

今天学习阿贾克斯（ajax）

关键词

线程（线程和进程的最小单位 JavaScript是单线程的语言（单线程的语进程（正在运行的程序）

进程（正在运行的程序）

同步（一个线程执行（同步阻塞））

上一个没有做完下一个不能执行

异步 （多个线程）

上一个和这一个没有关系

言渲染线程也是单线程））

概述

AJAX (asynchronous JavaScript and xml) 异步的JavaScript和xml。他是用于发送http请求的，他可以

发送异步请求。他可以完成页面的局部刷新功能（在整个页面不刷新的前提下发送对应的请求改变对应

的部分的dom），他的核心对象为XMLHttpRequest（xhr）。

请求流程

new XMLHttpRequest新建一个请求对象

ajax的代码实现（ new XMLHttpRequest ()）

//新建请求对象

var xhr = new XMLHttpRequest()

//以对应的请求方式来打开对应的请求地址

xhr.open('get', 'http://jsonplaceholder.typicode.com/todos')

//发送请求

xhr.send()

//监听请求状态的变化 readystate (1-5 1准备发送 2 发送完成 3 发送完成数据准备接收 4数据

接收完毕 5 错误)

xhr.onreadystatechange = () => {

//进行判断对应的状态 4是数据接收完毕

if (xhr.readyState == 4) {

//responseText 表示返回的文本（字符串）

console.log(xhr.responseText)

}

}

XMLHttpRequest对象的相关属性及方法

属性

readyState 状态码

status http状态码

timeout 超时时间

responseText 响应文本

方法

open 打开一个请求

send 发送请求

setRequestHeader 设置请求头

getResponseHeader 获取响应头

事件

onreadystatechange 监听状态的改变

var xhr = new XMLHttpRequest()

//属性

//readyState 对应的xhr对象的一个状态码（这个状态码只有xhr才有）

// 0 没有请求 1准备发送 2请求已经发送 3请求发送完毕准备接收响应数据 4响应接收完毕

console.log(xhr.readyState);

//status http状态码（只要发送http请求都会有）

// 取值为100 - 599

// 1开头（表示成功但是需要后续操作）

// 2开头 (成功 200)

// 3开头 (重定向 304)

// 4开头 (表示客户端错误 404(找不到页面) 403(权限不足))

// 5开头 (表示服务器错误 500)

console.log(xhr.status);

//responseText 响应的文本

console.log(xhr.responseText);

//responseXML 响应的xml

console.log(xhr.responseXML);

//响应类型

console.log(xhr.responseType);

//响应的地址

console.log(xhr.responseURL);

//设置请求的超时时间

console.log(xhr.timeout );

//方法

//设置请求 open 请求方式请求地址

xhr.open('get','')

//发送方法里面的传递的参数是设置给请求体的内容

xhr.send('')

//请求头相关设置请求头通过键值对的方式键值都是字符串

xhr.setRequestHeader('Connection','keep-alive')

//响应头获取通过key来获取value

xhr.getResponseHeader('Content-type')

//事件当前状态改变的事件

xhr.onreadystatechange = ()=>{

//判断readyState为4 http状态码以2开头

if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){

//接收数据进行处理

}

}

数据渲染案例

<button>请求数据</button>

<ul>

</ul>

<script>

//获取ul

var ul = document.querySelector('ul')

// http://jsonplaceholder.typicode.com/todos?_limit=10&_page=2

//get请求的传参使用?和&做拼接 search传参（query传参）

//第一个前面要添加? 对应的多个参数使用&连接

//get传参时使用地址的拼接来传递参数

// _limit表示个数 _page表示页数

document.querySelector('button').onclick = function(){

//请求数据

var xhr = new XMLHttpRequest()

//设置请求地址

xhr.open('get','http://jsonplaceholder.typicode.com/todos')

//发送请求

xhr.send()

//接收响应数据

xhr.onreadystatechange = ()=>{

if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){

//接收数据

var str = xhr.responseText

//将字符串转为对应的对象

var result = JSON.parse(str)

//渲染

//遍历result进行渲染

result.forEach(item => {

ul.innerHTML += ` <li>

id: ${item.id}

${item.title}

${item.completed?'�':'�'}

</li>`

});

}

}

}

</script>

get请求封装（get请求不安全）

//封装一个对应的get请求的方法

//请求地址参数 (以对象传递) 对应的处理不一样

export function get(url,params={},callback){

//判断url地址是否传递如果没有传递直接报错

if(!url){

throw new Error('地址必须传递')

}

//新建请求对象

let xhr = new XMLHttpRequest()

//设置请求地址 (拼接参数到url)

//遍历对象中所有的属性

for(let key in params){

// {_limit:10,_page:1}

// http://jsonplaceholder.typicode.com/todos?_limit=10&_page=1

//判断url里面是否存在? 如果没有就加上

if(!url.includes('?')){

url+=`?${key}=${params[key]}`

}else{

url+=`&${key}=${params[key]}`

}

}

xhr.open('get',url)

//发送请求

xhr.send()

//监听请求状态改变

xhr.onreadystatechange = ()=>{

//判断是否成功

if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){

//成功调用回调函数传递参数出去

//先转为对象再传递出去

callback(JSON.parse(xhr.responseText))

}

}

}

分页渲染示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<button>1</button>

<button>2</button>

<button>3</button>

<button>4</button>

<button>5</button>

<ul>

</ul>

<script type="module">

import {get} from './ajax.js'

//获取ul

var ul = document.querySelector('ul')

//获取所有按钮

var btns = document.querySelectorAll('button')

//遍历按钮添加事件

Array.from(btns).forEach((v,i)=>{

v.onclick = ()=>{

}

})

</script>

</body>

</html>

简单的post请求

<form action="https://jsonplaceholder.typicode.com/posts" method="post">



<script>

//获取form表单

document.forms[0].onsubmit = ()=>{

//获取input框的数据

var inputs = document.querySelectorAll('input')

var username = inputs[0].value

var password = inputs[1].value

//新建请求对象

var xhr = new XMLHttpRequest()

//打开连接

xhr.open('post','https://jsonplaceholder.typicode.com/posts')

//设置请求头告诉后台的我的内容为表单形式

//内容的类型为表单形式

xhr.setRequestHeader('Content-type','application/x-www-form-

urlencoded')

//发送数据 key=value&key=value send里面的数据放入在请求体

xhr.send(`username=${username}&password=${password}`)

//监听状态改变

xhr.onreadystatechange = ()=>{

if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){

console.log(xhr.responseText);

}

}

//禁止默认行为

return false

}

</script>

post请求封装（要比get请求安全）

//封装post请求

export function post(url,params={},callback){

//判断url地址是否传递如果没有传递直接报错

if(!url){

throw new Error('地址必须传递')

}

//新建请求对象

let xhr = new XMLHttpRequest()

//设置请求地址 (拼接参数到url)

xhr.open('post',url)

//设置请求头

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

//数据拼接发送

let paramsStr = ""

for(let key in params){

// {_limit:10,_page:1}

// _limit=10&_page=1

paramsStr +=

`

&${key}=${params[key]}`

}

//删除最前面的&

paramsStr = paramsStr.substring(1)

//发送请求

xhr.send(paramsStr)

//监听请求状态改变

xhr.onreadystatechange = ()=>{

//判断是否成功

if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){

//成功调用回调函数传递参数出去

//先转为对象再传递出去

callback(JSON.parse(xhr.responseText))

}

}

}

ajax封装

//将post请求和get请求抽取

export const ajax = (url,option,callback)=>{

//判断是否具备url

if(!url){

throw new Error('地址必须传递')

}

//你传什么就改什么不传为默认值

let defaultOption = {

method:'get',

data:{},

contentType:'application/json',

timeout:'3000'

}

//遍历对象里面key

for(let key in option){

//默认的选项里面存在这个key

if(defaultOption[key]){

//用option里面对应key的值来替换默认值

defaultOption[key] = option[key]

}

}

//新建请求对象

let xhr = new XMLHttpRequest()

//判断是get请求还是post请求

if(defaultOption.method == 'get'){

//设置请求地址 (拼接参数到url)

//遍历对象中所有的属性

for(let key in defaultOption.data){

// {_limit:10,_page:1}

// http://jsonplaceholder.typicode.com/todos?_limit=10&_page=1

//判断url里面是否存在? 如果没有就加上

if(!url.includes('?')){

url+=`?${key}=${defaultOption.data[key]}`

}else{

url+=`&${key}=${defaultOption.data[key]}`

}

}

}

xhr.open(defaultOption.method,url)

//设置请求头

xhr.setRequestHeader('content-type',defaultOption.contentType)

//判断是否为post请求

if(defaultOption.method == 'post'){

//数据拼接发送

let paramsStr = ""

for(let key in defaultOption.data){

// {_limit:10,_page:1}

// _limit=10&_page=1

paramsStr +=

`

&${key}=${defaultOption.data[key]}`

}

//删除最前面的&

paramsStr = paramsStr.substring(1)

//发送请求

xhr.send(paramsStr)

}else{

//发送请求

xhr.send()

}

//监听请求状态改变

xhr.onreadystatechange = ()=>{

//判断是否成功

if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){

//成功调用回调函数传递参数出去

//先转为对象再传递出去

callback(JSON.parse(xhr.responseText))

}

}

}

ajax promise封装

//将post请求和get请求抽取

export const ajax = (url,option)=>{

//判断是否具备url

if(!url){

throw new Error('地址必须传递')

}

//你传什么就改什么不传为默认值

let defaultOption = {

method:'get',

data:{},

contentType:'application/json',

timeout:'3000'

}

//遍历对象里面key

for(let key in option){

//默认的选项里面存在这个key

if(defaultOption[key]){

//用option里面对应key的值来替换默认值

defaultOption[key] = option[key]

}

}

//新建请求对象

let xhr = new XMLHttpRequest()

//判断是get请求还是post请求

if(defaultOption.method == 'get'){

//设置请求地址 (拼接参数到url)

//遍历对象中所有的属性

for(let key in defaultOption.data){

// {_limit:10,_page:1}

// http://jsonplaceholder.typicode.com/todos?_limit=10&_page=1

//判断url里面是否存在? 如果没有就加上

if(!url.includes('?')){

url+=`?${key}=${defaultOption.data[key]}`

}else{

url+=`&${key}=${defaultOption.data[key]}`

}

}

}

xhr.open(defaultOption.method,url)

//设置请求头

xhr.setRequestHeader('content-type',defaultOption.contentType)

//判断是否为post请求

if(defaultOption.method == 'post'){

//数据拼接发送

let paramsStr = ""

for(let key in defaultOption.data){

// {_limit:10,_page:1}

// _limit=10&_page=1

paramsStr +=

`

&${key}=${defaultOption.data[key]}`

}

//删除最前面的&

paramsStr = paramsStr.substring(1)

//发送请求

xhr.send(paramsStr)

}else{

//发送请求

xhr.send()

}

return new Promise((resolve,reject)=>{

//监听请求状态改变

xhr.onreadystatechange = ()=>{

//判断是否成功

if(xhr.readyState == 4){

//成功调用resolve传递数据

//先转为对象再传递出去

if(/^2\d{2}$/.test(xhr.status)){

resolve(JSON.parse(xhr.responseText))

}

if(/^4\d{2}/.test(xhr.status)){

reject()

}

}

}

//如果xhr对象有错也调用reject

xhr.onerror = ()=>{

reject()

}

})

}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,319评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,801评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,567评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,156评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,019评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,090评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,500评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,192评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,474评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,566评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,338评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,212评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,572评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,890评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,169评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,478评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,661评论 2赞 335