首页 > 其他分享 >js的ajax

js的ajax

时间:2022-10-31 19:45:24浏览次数:58  
标签:请求 get url js 发送 xhr ajax key

一些关键词

线程(线程和进程的最小单位 javascript是单线程的语言 ())

进程(正在运行的程序)

同步(一个线程执行(同步阻塞))上一个没有做完 下一个不能执行

异步(多个线程)  上一个和这一个没有关系

 

ajax的概述

 

AJAX (asynchronous JavaScript and xml) 异步的JavaScript和xml。他是用于发送http请求的,他可以发送异步请求。他可以完成页面的局部刷新功能(在整个页面不刷新的前提下 发送对应的请求改变对应的部分的dom),他的核心对象为XMLHttpRequest(xhr)。

 

 

 ajax的代码实现

//新建请求对象
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 监听状态的改变

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')

数据渲染案例

<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请求的方法
//请求地址 参数 (以对象传递) 对应的处理不一样
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))
}
}
}

post请求封装

//封装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))
}
}
}

 

标签:请求,get,url,js,发送,xhr,ajax,key
From: https://www.cnblogs.com/tch001/p/16845508.html

相关文章

  • vue.js拓展无法启用
    vue.js拓展无法启用这里我以自己的谷歌浏览器演示C:\Users\维磊\AppData\Local\Google\Chrome\UserData\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\6.4.5_0......
  • jsonp
    https://www.xp.cn/b.php/68921.htmljs跨域请求数据的3种常用的方法由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的......
  • ajax测试wepApi模板
     ajax测试wepApi模板<body><%--<inputid="CreditValueInput"/>--%><buttonid="SubmitButton">点击跳转</button><formid="form1"runat="server">......
  • three.js 在低版本浏览报THREE.WebGLProgran: shader error 报错解决办法
    场景:在低版本浏览器下使用three.js控制台报以下错:Error:WebGL:linkProgram:Musthaveacompiledvertexshaderattached.THREE.WebGLProgran:shadererror:035715......
  • 使用JS创建一个类(面试题)
    1.利用对象字面量创建对象<body><script>varobj={name:'javascript',age:18,sex:'undefined',express:function(){varsent=window.prompt("请你输入你......
  • JSONObject的toBean 和 fromObject
    publicstaticvoidmain(String[]args){Mapmap=newHashMap();map.put("我","妹");map.put("擦","哇");map.put("你","呀");JSONObjectjson=JSONObject.fromObject(m......
  • 原生拖拽太拉跨了,纯JS自己手写一个拖拽效果,纵享丝滑
    前言提到元素拖拽,通常都会先想到用HTML5的拖拽放置(Drag和Drop)来实现,它提供了一套完整的事件机制,看起来似乎是首选的解决方案,但实际却不是那么美好,主要是它的样式太......
  • #打卡不停更# 简单的JS鸿蒙小游戏——飞行棋之页面构建
    前言飞行棋大家应该都玩过吧,红、绿、黄、蓝四名玩家轮流掷骰子移动棋子,争先到达终点,期间还要提防己方棋子不被击落。今天就先带大家学习下如何完成飞行棋游戏的简单布局。......
  • js基础知识
    JS有三种方式行内式<ajavascrip="JS代码"></a><divonclick="fn()"></div>内嵌式=><script>JS代码</script>外链式=>外部引入的方式JS的数据类型......
  • JSP页面原生弹窗
    window.showModalDialog(已过时)window.showModalDialog()方法的作用是创建和展示一个指向特定网页的模态对话框。该方法已经过时,特性已经从Web标准中删除,虽然一些浏......