首页 > 其他分享 >AJAX-基础步骤

AJAX-基础步骤

时间:2022-11-15 12:55:41浏览次数:38  
标签:status XMLHttpRequest 请求 步骤 基础 xhr AJAX http open

 

 

 

 

 

 

发送AJAX  get请求:

第一步:创建AJAX核心 XMLHttpRequest对象

var xhr = new XMLHttpRequest

 

第二步:注册回调函数;

onreadystatechange 是一个回调函数, 这个函数在XMLHttpRequest对象的readyState状态值发生改变(0  -> 1 -> 2 -> 3 -> 4)的时候被调用这个回调函数会被调用多次,因为在状态发生改变就会被调用

xhr.onreadystatechange = function(){  

if   (this.readyState == 4){

  响应结束了,响应结束后,一般会有一个http的状态码:200 成功、404 资源找不    到,500  服务器内部错误,http状态码是http协议的一部分,

获取http状态码,通过status属性

connsole.log("http响应状态码" + this.status)

  }

   }.

当这个XMLHttpRequest对象的readyState的状态是4的时候,表示响应结束

获取响应的信息可以通过XMLRequest对象的responseText属性来获取响应信息

 

第三步:开启通道

XMLHttpRequest对象的open方法,open(method,URL,async,user,pwd)  open只开启通道

xhr.open("GET"  ,  "/项目路径",true)

 

  method:请求的方式,可以使GET,POST,也可以是其他请求方式

  url: 请求路径

  async:只能是true或者false,true   |    true表示这个ajax请求是一个异步请求,false表示这个ajax请求是一个同步请求

  user:用户名         pwd:密码     这俩个是用来进行身份验证的,说明在服务器上访问某些资源可能要进行身份验证的

第四步:发送请求

xhr.send()

 

 

 

完整:

var xhr = new XMLHttpRequest

xhr.onreadystatechange = function(){  

if   (this.status == 400){

}else if(this.status == 500){

}else if(this.status == 200){

document.getElementById("").innnerHTML = this.responseText

}

xhr.open("GET","路径",ture)

xhr.send()

 

标签:status,XMLHttpRequest,请求,步骤,基础,xhr,AJAX,http,open
From: https://www.cnblogs.com/hongming-gonghan/p/16892060.html

相关文章

  • 深度学习工程基础
    欠拟合与过拟合欠拟合是指模型在训练集、验证集和测试集上均表现不佳的情况过拟合是指模型在训练集上表现很好,到了验证和测试阶段就大不如意了,即模型的泛化能力很差。解......
  • ECharts基础概念
    简要介绍下ECharts中的基础概念:1、echarts实例:一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等。dom节点作为echarts的渲染容器,......
  • Solidity基础 | 03 一篇文章掌握值类型(布尔型和整型)及其运算
    导读区块链这么火,不学一下怎么行?今天这篇文章将带领大家了解区块链的两种基本值类型——布尔类型和整数类型!讲解类型涉及到的运算以及一些注意问题。让我们一起走进本文看一......
  • Solidity基础 | 02 基本合约结构
    导读区块链这么火,不学一下怎么行?今天这篇文章将带领大家了解合约的结构,了解最基本合约,为以后设计功能更加强大的合约打下基础!让我们一起走进本文看一下吧!如果你有什么问题,或......
  • vue源码分析-基础的数据代理检测
    简单回顾一下这个系列的前两节,前两节花了大量的篇幅介绍了Vue的选项合并,选项合并是Vue实例初始化的开始,Vue为开发者提供了丰富的选项配置,而每个选项都严格规定了合并的策......
  • 小程序基础之引用vant组件库
    第一步:终端npminit-y会生成一个pack.json文件。(初始化包管理,记录这个项目用的包。)第二步:npminstall会生成一个package-lock.json文件。(一个版本锁定的功能)上两步有......
  • Linux基础11 重定向(输入重定向,输出重定向); 管道技术, tee, xargs
    1.重定向 将原本要输出到屏幕上的内容,重新指向一个文件或者设备中,屏幕上不会输出原本的内容。为什么要使用重定向: 1.当屏幕输出的信息很重要,而且希望保存重要的信息时。 ......
  • vue中的ajax
    vue中的ajaxvue脚手架配置代理方法一​ 在vue.config.js中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给前端(80......
  • 【ELK解决方案】ELK集群+RabbitMQ部署方案以及快速开发RabbitMQ生产者与消费者基础服
    前言:大概一年多前写过一个部署ELK系列的博客文章,前不久刚好在部署一个ELK的解决方案,我顺便就把一些基础的部分拎出来,再整合成一期文章。大概内容包括:搭建ELK集群,以及写一......
  • 深度学习基础课:用全连接层识别手写数字(上)
    大家好~我开设了“深度学习基础班”的线上课程,带领同学从0开始学习全连接和卷积神经网络,进行数学推导,并且实现可以运行的Demo程序线上课程资料:本节课录像回放加QQ群,获得......