前言

我们经常会用到js发送网络请求,这里用到XMLHttpRequest,主要是为了考虑早期的IE。分为三步:创建需要的对象、连接和发送、接收。

GET请求

var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
httpRequest.open('GET', 'url', true);//第二步:打开连接 将请求参数写在url中 ps:"./Ptest.php?name=test&nameone=testone"
httpRequest.send();//第三步:发送请求 将请求参数写在URL中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = httpRequest.responseText;//获取到json字符串,还需解析
console.log(json);
}
};

POST请求

var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)
httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
var json = httpRequest.responseText;//获取到服务端返回的数据
console.log(json);
}
};

post方式发送json

var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接/***发送json格式文件必须设置请求头 ;如下 - */
httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)var obj = { name: 'zhansgan', age: 18 };
httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
var json = httpRequest.responseText;//获取到服务端返回的数据
console.log(json);
}
};

js发送get 、post请求的更多相关文章

  1. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  2. 从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

    wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求.data事件在数据到达时被触发,error事件在发生错误时被触发.HTTP请求中的数据格式通过MIM ...

  3. Node.js 0.12: 正确发送HTTP POST请求

    Node.js 0.12: 正确发送HTTP POST请求 本文针对版本:Node.js 0.12.4 之前写过一篇Node.js发送和接收HTTP的GET请求的文章,今天再写一篇,讲发送POST的请 ...

  4. js 发送异步请求

    js用XMLHttpRequest发送异步请求 发送GET请求 var xhr = new XMLHttpRequest(); xhr.open('GET',url);//url为请求地址 xhr.r ...

  5. 前端必备基础知识之--------原生JS发送Ajax请求

    原生JS发送Ajax请求 ajax({ type: 'POST', url: 'http://10.110.120.123:2222', // data: param, contentType: 'a ...

  6. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  7. Fiddler 使用fiddler发送捕获的请求及模拟服务器返回

    使用fiddler发送捕获的请求及模拟服务器返回 by:授客 QQ:1033553122 1.做好相关监听及代理设置 略 2.发送捕获的请求 如图 3.模拟服务器返回 本例的一个目的是,根据服务器返回 ...

  8. 纯js异步无刷新请求(只支持IE)【原】

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  9. js多个异步请求,按顺序执行next

    在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺 ...

  10. js多个异步请求

    一,两个(或多个)js异步并发执行,怎么在两个AJax异步操作之后执行一个新的操作 原题来自 ES6 方法 1.Promise 包装异步ajax操作,2.定义async 函数,3.用await等待pr ...

随机推荐

  1. Qt编写物联网管理平台34-地图按钮

    一.前言 地图按钮很常见,这也是用户给钱就干的一个模块.设备现场提供了对应的地图文件,其实就是图片文件,做的简单点就是直接CAD图纸转成jpg,做的精致点就是搞了3D风格的立体样式图片,其实还是图片, ...

  2. 关于Qt选择qml还是widget的深度思考

    在Qt界始终有两大阵营产生激烈的纷争,那就是选用qml还是widget好,大量初学者也会问这个问题,有以下几点总结. widget属于传统界面开发,和VB/VC/Delphi等拖曳控件开发类似,走CP ...

  3. [转]CMake菜谱(CMake Cookbook中文版)

    CMake菜谱(CMake Cookbook中文版) 翻译 搜索 复制

  4. DotNetBar控件中,删除或移除AdvTree上指定名称的Node

    废话少说,直接上核心代码: string deleteNodeName = "节点1"; //移除advTree上指定名称的Node Node deleteNode = advTr ...

  5. 整理ML&AI学习路径图

    干货分享: 下面给出一个笔者自己整理的GitHub仓库:https://github.com/isLinXu/awesome-road-map 里面包含了一些可供参考的学习路径和思维导图,并整理微软. ...

  6. 「工具分享」Checker Script for Linux

      以前整的一个 Linux 下对拍程序 qwq.   建一个文件夹, 假设叫 dir, 然后把 checker.sh 扔进去, 顺便 chmod +x checker.sh. 你需要自己设置一下代码 ...

  7. .net core 用 identitymodel 请求token。

    identitymodel  也有在Nuget里搜索和安装. identitymodel 扩展了HttpClient的一些方法用于token请求. 例如:client.RequestTokenAsyn ...

  8. SpringCloud(八) - 自定义token令牌,鉴权(注解+拦截器),参数解析(注解+解析器)

    1.项目结构介绍 项目有使用到,redis和swagger,不在具体介绍: 2.手动鉴权和用户信息参数获取(繁杂,冗余) 2.1用户实体类 /** * Created On : 4/11/2022. ...

  9. 微服务实战系列(四)-注册中心springcloud alibaba nacos-copy

    1.场景描述 因要用到微服务,关于注册中心这块,与同事在技术原型上做了讨论,初步定的方案是使用:阿里巴巴的nacos+springcloud gateway,下面表格是同事整理的注册中心对比,以前用的 ...

  10. 九集代码深度解析SpringBoot原理:笔记整理

    手动注册Tomcat中的servlet容器 子父容器概念