php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤

注：请求地址是自己的项目地址，请自行更改。这只是一个简单的原生XMLHttpRequst的使用，之后会发如何封装原生ajax实现jequery的ajax

第一步：创建xhr对象。const xhr = new XMLHttpRequest();

第二步：open()设置。xhr.open('PUT','http://118.24.84.199:8080/sm/accept/list',false);

第三步：设置接口需要的头部。xhr.setRequestHeader('token','515b8c62-ddf4-41ef-a7c8-93957e1c589e');

xhr.setRequestHeader('Accept','application/json');

xhr.setRequestHeader('Content-Type','application/json');

第四步：发送请求数据。注意：这里的数据需要进行处理，处理为json文件，使用JSON.stringify处理。let data = {

page:1,

pageSize:10,

};

data = JSON.stringify(data);

xhr.send(data);

到这里就已经发送了，可以在浏览器的网络请求中查看请求的情况。

但是在页面中还没有进行数据处理如果数据是同步请求：直接在send()语句之后对数据进行处理。console.log(xhr.response);但是一般情况下数据的请求都是异步的，那么就要使用onreadystatechange这个事件对数据进行处理。

接收到数据之后将其打印。xhr.onreadystatechange = function(event){

if (xhr.readyState == 4){

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

console.log(JSON.parse(xhr.response));

} else {

console.log("Request was unsuccessful: " + xhr.status);

}

};

php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤相关推荐

原生JavaScript书写ajax请求
1. get请求 // 新建一个请求对象 var xhr = null; // 兼容IE浏览器 if(window.XMLHttpRequest){xhr = new XMLHttpRequest() ...
php 判断是否是ajax请求,php实现判断是否为ajax请求的方法
这篇文章主要介绍了php判断是否为ajax请求的方法,结合实例形式分析了ajax请求的原理及后台针对ajax请求的判断技巧,需要的朋友可以参考下先说前端使用 jQuery 时怎么区分: jQuery ...
JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战目录上一章下一章上一个任务/上一节下一个任务/下一节实例链接点我目录任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
发起ajax请求很慢,为什么我的Ajax请求比一般的浏览器请求慢得多？
我为一位朋友创建了一个网站.因为他希望音乐播放器能够通过页面加载继续播放音乐,所以我决定通过ajax(由jQuery提供便利)将内容加载到页面中.它工作的很好,当没有javascript时它会很好地回 ...
使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单首先我们需要编写一个html代码,这里我是采用nodej ...
java 判断请求为 ajax请求_Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，java 判断请求是不是ajax请求...
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java 判断请求是不是ajax请求,Java判断是否为ajax请求 >>>>>> ...
Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，java 判断请求是不是ajax请求
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求 Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java 判断 ...
easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...

php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤

php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤相关推荐

最新文章

热门文章