js 实现ajax(get和post)
get和post的区别:
1.GET产生一个TCP数据包;POST产生两个TCP数据包。
对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。
2.get请求数据有限制,post请求数据没有限制
3.请求参数在url中发送,post请求参数在http消息主体中发送
//get
function get() {
//创建XMLHttpRequest
let xhr = new XMLHttpRequest();
//监听响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
console.log(xhr.responseText);
}
};
xhr.open("GET","your url",true);
xhr.send();
} //post
function post () {
//请求参数、url、创建XMLHttpRequest
let data = 'name=tom&age=18',
url = 'your url',
xhr = new XMLHttpRequest(); xhr.open('post', url);
//设置header
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
console.log(xhr.responseText);
}
}
}
参考:1.https://blog.csdn.net/u012391923/article/details/53197387?utm_source=blogxgwz3
2.http://www.runoob.com/tags/html-httpmethods.html
js 实现ajax(get和post)的更多相关文章
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Jquery学习笔记 --ajax删除用户,使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
- 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室
实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSoc ...
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化
Atitit 发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- Intercooler.js – 让 AJAX 像锚标签一样简单
使用 Intercooler,你可以添加 Ajax 到你的应用程序,而无需使用客户端模式的路由,认证,渲染,工厂或依赖注入.事实上,你不需要写任何的 JavaScript 代码.Intercooler ...
- 使用原生JS封装Ajax
使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...
- JS实现Ajax,Josn数据的序列化和反序列化---例: 省市区联动(包含get,post)
服务器端相应JOSN数据 用到序列化和反序列化----命名空间using System.Web.Script.Serialization; public void ProcessRequest(H ...
随机推荐
- .idea文件夹是干嘛的
question python为什么每次创建的文件目录下都含有.idea/文件夹,该文件夹又是用来干嘛的 answer 当使用pycharm作为IDE时,会自动生成.idea/文件夹来存放项目的配置信 ...
- 改善程序与设计的55个具体做法 day1
博客好久没更新了,就从这本读书笔记开始吧. 条款01: 视C++为一个语言联邦 C++可视为有四个次语言组成的: 1.C语言 2.Object-Oriented C++ (面向对象C++) 3.Tem ...
- eslint 配合 git (husky)
为了保证每次提交的 git 代码是正确的,为此我们可以使用 eslint 配合 git hook, 在进行git commit 的时候验证eslint规范 如果 eslint 验证不通过,则不能提交. ...
- 基于node开发的web应用,负载均衡的简单实践
集群(cluster)是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器. 负载均衡(Load Balance ...
- Android开发学习之三——第一个Android程序
下面我们建立第一个Android程序. 打开Eclipse,开始如下步骤: 1.File ==> New ==> Android Application Project 出现如下窗口: 2 ...
- CDH版本Hbase二级索引方案Solr key value index
概述 在Hbase中,表的RowKey 按照字典排序, Region按照RowKey设置split point进行shard,通过这种方式实现的全局.分布式索引. 成为了其成功的最大的砝码. 然而单一 ...
- 单页导航菜单视觉设计HTML模板
单页导航菜单视觉设计HTML模板,视觉,企业,html,单页,单页导航菜单视觉设计HTML模板是一款磨砂背景的大气时尚HTML设计网页模板 http://www.huiyi8.com/moban/
- 清除float浮动三种方式
Float的作用? w3c的官方解释: Content flows down the right side of a left-floated box and down the left side o ...
- PostgreSQL与Oracle对应的函数
一.对应的函数 1.sysdate oracle pgsql sysdate current_date. current_timestamp nvl coalesce trunc date_trun ...
- 【Codeforces】Gym 101156E Longest Increasing Subsequences LIS+树状数组
题意 给定$n$个数,求最长上升子序列的方案数 根据数据范围要求是$O(n\log n)$ 朴素的dp方程式$f_i=max(f_j+1),a_i>a_j$,所以记方案数为$v_i$,则$v_i ...