原生Ajax发送get、post请求每一步
说明
发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法
方法(图一)
属性(图二)
第一步:创建 XMLHttpRequest对象,下面都简写为 xhr对象
由于XMLHttpRequest不兼容IE6及以下的浏览器,因此在IE6及以下的浏览器不能使用XMLHttpRequest创建 xhr对象,使用ActiveXObject('Microsoft.XMLHTTP')代替。但是我写好之后测试了一波,IE5好像支持 XMLHttpRequest对象,IE6没测,因此技术不断更新,现在看到的不一定是对的。还需要自己动手测试以下。
var xhr = null
if (window.XMLHttpRequest){//如果浏览器存在这个对象 则以这种方式创建
xhr = new XMLHttpRequest()
} else{//否则 以下面这种方式
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//或者使用 try catch 这里与上面的 if 语句 效果等同
try{
xhr = new XMLHttpRequest()
}catch(e){
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
第二步:准备发送,调用open方法
xhr.open(type, url, boolean),该方法具有三个参数。
type:请求的方式,可以是以下这些值: GET、POST、DELETE、OPTIONS、HEAD、PUT、TRACE、CONNECT,用的最多的是 GET、POST请求。
url: 请求路径和参数。路径和参数以?为分割线例如 :http://localhost:3000?uname="车神-黄杰&age=23"
boolean:操作方式,true(默认值) --->异步发送请求 false ---> 同步发送请求。
第三步:发送,调用send方法
xhr.send()
GET请求:最好传入null,有些浏览器约定好了,在发送GET请求时不传入null会报错。
POST请求:传入向服务器发送的数据。
向服务器发送数据
GET请求
此时数据由open方法传入,数据拼接在第二个参数请求路径的后面 以?为分隔符。
在IE浏览器中,请求参数存在中文会出现乱码 此时需要对请求参数进行编码 使用encodeURI(parme)解决兼容性。
encodeURI() 可把字符串作为 URI 进行编码 但是对于一些ASCLL的字母或者数字不会进行编码, 一些特殊的符号也不会进行编码 例如_ . ! ~ * ' ( ) 等
例如encodeURI('宿舍') 此时结果为 %E5%AE%BF%E8%88%8D 。
var parme = 'username=' + "车神-黄杰" + '&paw='+ 123
//在IE浏览器会出现乱码
//xhr.open('GET', 'http://localhost:3000/?' + parme, true)
xhr.open('GET', 'http://localhost:3000/?' + encodeURI(parme), true)
POST请求
在发送GET请求的时候,send()方法传入null,而在POST请求中,传入需要发送给服务器的数据。
此时不需要对请求字符串进行编码,但是需要设置Content-Type
为application/x-www-form-urlencoded
。
var parme = 'username=' + "车神-黄杰" + '&paw='+ 123
//调用open方法
xhr.open('POST', 'http://localhost:3000/', true)
//设置Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//发生数据
xhr.send(parme)
第四步:处理请求
绑定 onreadystatechange事件
readyState 为 4说明收到数据
status 为 200 表示数据完整
xhr.onreadystatechange = function () {
// 状态为4 表示收到数据
if (xhr.readyState === 4){
//状态码为 200 表示数据完整
if (xhr.status === 200){
//接收并处理数据
var rel = xhr.responseText
}
}
}
示例
主要的事件
onreadystatechange
,属性readyState、status
,请看图一、图二即可
GET
getAjax()
function getAjax(){
//发送Ajax的步骤
var parme = 'username=' + "车神-黄杰" + '&paw='+ 123
//第一步: 创建XMLHttpRequest对象
var xhr = null
if (window.XMLHttpRequest){//如果浏览器存在这个对象 则以这种方式创建
xhr = new XMLHttpRequest()
} else{//否则 以下面这种方式
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//第二步 准备发送 调用opent方法 (有三个参数) 拼接数据
xhr.open('GET', 'http://localhost:3003/?' + encodeURI(parme), true)
//第三步 发送 调用send方法
xhr.send(null)//get请求 为null
//第四步处理请求 绑定事件onreadystatechange
xhr.onreadystatechange = function () {
// 状态为4 表示收到数据
if (xhr.readyState === 4){
//状态码为 200 表示数据完整
if (xhr.status === 200){
//接收并处理数据
var rel = xhr.responseText
//接收的是json数据 使用JSON.parse()转为js对象
console.log("GET: " + JSON.parse(rel).msg)
}
}
}
}
POST
postAjax()
function postAjax(){
//发送Ajax的步骤
var parme = 'username=' + "车神-黄杰" + '&paw='+ 123
//第一步: 创建XMLHttpRequest对象
var xhr = null
if (window.XMLHttpRequest){//如果浏览器存在这个对象 则以这种方式创建
xhr = new XMLHttpRequest()
} else{//否则 以下面这种方式
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//第二步 准备发送 调用opent方法 (有三个参数) 拼接数据
xhr.open('POST', 'http://localhost:3003/?', true)
//第三步 发送 调用send方法
//设置Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(parme)//get请求 为null
//第四步处理请求 绑定事件onreadystatechange
xhr.onreadystatechange = function () {
// 状态为4 表示收到数据
if (xhr.readyState === 4){
//状态码为 200 表示数据完整
if (xhr.status === 200){
//接收并处理数据
var rel = xhr.responseText
//接收的是json数据 使用JSON.parse()转为js对象
console.log("POST: " + JSON.parse(rel).msg)
}
}
}
}
node简单服务器 只是部分代码
//GET
router.get('/', (req, res) =>{
res.json({"msg": "发生成功", "code": 1})
})
//POST
router.post('/', (req, res) =>{
res.json({"msg": "发生成功", "code": 1})
})
打印结果
原生Ajax发送get、post请求每一步的更多相关文章
- Ajax发送PUT/DELETE请求时出现错误的原因及解决方案
本文讲什么? 大家应该都知道.在HTTP中,规定了很多种请求方式,包括POST,PUT,GET,DELETE等.每一种方式都有这种方式的独特的用处,根据英文名称,我们能够很清楚的知道DELETE方法的 ...
- 原生Ajax发送请求
ajax get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...
- Ajax发送和接收请求
首先Ajax的不刷新页面提交数据 基本上浏览器能接收的信息,Ajax都可以接收,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等..... <script> / ...
- 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)
自动发送 ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生ajax的请求函数
ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应 ...
随机推荐
- 根据设备id自动打开本设备的串口
对于串口设备经常遇到重新拔插串口设备时候,程序又需要重新选择串口打开.对此很少麻烦的要死. 现在我们可以根据该设备的id去遍历串口设备,一旦符合就打开此串口即可. public void init() ...
- 【题解】BZOJ4241: 历史研究(魔改莫队)
[题解]BZOJ4241: 历史研究(魔改莫队) 真的是好题啊 题意 给你一个序列和很多组询问(可以离线),问你这个区间中\(\max\){元素出现个数\(\times\)元素权值} IOI国历史研究 ...
- js获取当前农历时间
<template> <div class="gaia-header"> <img alt="gaia_logo" src=&qu ...
- Java虚拟机详解(十一)------双亲委派模型
在上一篇博客,我们介绍了类加载过程,包括5个阶段,分别是“加载”,“验证”,“准备”,“解析”,“初始化”,如下图所示: 本篇博客,我们来介绍Java虚拟机的双亲委派模型,在介绍之前,我先抛出一个问题 ...
- 如何在Pypi发布上传你自己的Python库
Pypi上传包 准备 Windows环境 *以下教程只能在Windows上执行,MACOS系统不能使用 注册账号 你需要在Pypi上注册一个账号. 安装必要的库 setuptools 原则上安装了pi ...
- Don’t Repeat Yourself,Repeat Yourself
Don't Repeat Yourself,Repeat Yourself Don't repeat yourself (DRY, or sometimes do not repeat yoursel ...
- less实现if else
less没有我们平常使用的if,else条件判断,而是用when来实现这种用法 1.比如我们要设置宽度 宽度可以百分比,也可以是像素,当是百分比时做对应处理,当是px时做另一种处理,这时候就需要用wh ...
- vue传值(父子传值,非父子传值)
vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...
- 【转】SQL语句面试题
1.一道SQL语句面试题,关于group by表内容:2005-05-09 胜2005-05-09 胜2005-05-09 负2005-05-09 负2005-05-10 胜2005-05-10 负2 ...
- 悄摸直播(一)—— 推流器的实现(获取笔记本摄像头画面,转流推流到rtmp服务器)
悄摸直播 -- JavaCV实现本机摄像头画面远程直播 推流器 一.功能说明 获取pc端的摄像头流数据 + 展示直播效果 + 推流到rtmp服务器 二.代码实现 /** * 推流器 * @param ...