AJAX创建请求步骤

.原生JS的写法

首先创建一个XMLHttpRequest异步对象

//1.创建异步对象
const xhr = new XMLHttpRequest();

(固定写法)new不能丢

初始化 设置请求方法和url

//初始化 设置请求方法和url
xhr.open('get', 'http://127.0.0.1:8000/server?a=100&b=200')

注:get后面单引号中连接为URL  :8000为端口,/server为接口(一般后端会设置好直接用就行);

get为请求方式,默认为get

请求方式有两种(post和get)

get请求和post请求的区别

1.get请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给WEB服务器。Ajax请求中,这种区别对用户是不可见的。

发送

//3.发送
xhr.send();

事件绑定 处理服务端返回结果

//4.事件绑定 处理服务端返回结果
xhr.onreadystatechange = function () {
                //判断(服务端返回了所有的结果)
                if (xhr.readyState === 4) {
                    //判断响应的状态码 200 404 403 401 500
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        //处理结果 包含四步 行 头 空行 体
                        //1.响应行
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }

readyState属性:存有XMLHttpRequset的状态从0到4,0~4分别代表程序进行到的步骤;

当readyState为0时:请求未初始化,创建异步请求对象;

当readyState为1时:初始化异步请求对象;

xhr.open('get', 'http://127.0.0.1:8000/server?a=100&b=200')

当readyState为2时:异步对象发布请求;xhr.send();

当readyState为3时:异步对象接受应答数据,从服务端返回数据;

当readyState为4时:全部读取完毕;

status属性表示网络请求状况一般会有几个值

网络请求成功:返回200;

网络请求失败:返回404;

网络请求出错:返回500;

本文只列出了一部分属性和最基本创建方法,有不对的地方希望大佬指正

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LMMMMH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值