说明

发送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-Typeapplication/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请求每一步的更多相关文章

  1. Ajax发送PUT/DELETE请求时出现错误的原因及解决方案

    本文讲什么? 大家应该都知道.在HTTP中,规定了很多种请求方式,包括POST,PUT,GET,DELETE等.每一种方式都有这种方式的独特的用处,根据英文名称,我们能够很清楚的知道DELETE方法的 ...

  2. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

  3. Ajax发送和接收请求

    首先Ajax的不刷新页面提交数据 基本上浏览器能接收的信息,Ajax都可以接收,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等..... <script> / ...

  4. 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

    自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

  5. 原生js发送ajax请求

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

  6. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  7. 原生JS发送Ajax请求、JSONP

    一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...

  8. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  9. 原生ajax的请求函数

    ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应 ...

随机推荐

  1. 根据设备id自动打开本设备的串口

    对于串口设备经常遇到重新拔插串口设备时候,程序又需要重新选择串口打开.对此很少麻烦的要死. 现在我们可以根据该设备的id去遍历串口设备,一旦符合就打开此串口即可. public void init() ...

  2. 【题解】BZOJ4241: 历史研究(魔改莫队)

    [题解]BZOJ4241: 历史研究(魔改莫队) 真的是好题啊 题意 给你一个序列和很多组询问(可以离线),问你这个区间中\(\max\){元素出现个数\(\times\)元素权值} IOI国历史研究 ...

  3. js获取当前农历时间

    <template> <div class="gaia-header"> <img alt="gaia_logo" src=&qu ...

  4. Java虚拟机详解(十一)------双亲委派模型

    在上一篇博客,我们介绍了类加载过程,包括5个阶段,分别是“加载”,“验证”,“准备”,“解析”,“初始化”,如下图所示: 本篇博客,我们来介绍Java虚拟机的双亲委派模型,在介绍之前,我先抛出一个问题 ...

  5. 如何在Pypi发布上传你自己的Python库

    Pypi上传包 准备 Windows环境 *以下教程只能在Windows上执行,MACOS系统不能使用 注册账号 你需要在Pypi上注册一个账号. 安装必要的库 setuptools 原则上安装了pi ...

  6. Don’t Repeat Yourself,Repeat Yourself

    Don't Repeat Yourself,Repeat Yourself Don't repeat yourself (DRY, or sometimes do not repeat yoursel ...

  7. less实现if else

    less没有我们平常使用的if,else条件判断,而是用when来实现这种用法 1.比如我们要设置宽度 宽度可以百分比,也可以是像素,当是百分比时做对应处理,当是px时做另一种处理,这时候就需要用wh ...

  8. vue传值(父子传值,非父子传值)

    vue组件传值,分为父子传值和非父子传值,父子传值又分为父传子和子传父. 组件之间的传值,实现了数据的联动,是从操作Dom到操作数据一个跳转性的突破,在学习vue双向绑定原理之后, 这种观念就应该继续 ...

  9. 【转】SQL语句面试题

    1.一道SQL语句面试题,关于group by表内容:2005-05-09 胜2005-05-09 胜2005-05-09 负2005-05-09 负2005-05-10 胜2005-05-10 负2 ...

  10. 悄摸直播(一)—— 推流器的实现(获取笔记本摄像头画面,转流推流到rtmp服务器)

    悄摸直播 -- JavaCV实现本机摄像头画面远程直播 推流器 一.功能说明 获取pc端的摄像头流数据 + 展示直播效果 + 推流到rtmp服务器 二.代码实现 /** * 推流器 * @param ...