原生ajax的请求封装get和post
一个完整的AJAX请求包括五个步骤:
1.创建XMLHTTPRequest对象
2.使用open方法创建http请求,并设置请求地址
3.设置发送的数据,开始和服务器端交互
4.注册事件
5.获取响应并更新界面
function ajax_method(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}
原生ajax的请求封装get和post的更多相关文章
- 原生ajax的请求过程
原生ajax的请求过程 创建全平台兼容的XMLHttpRequest对象: function getXHR(){ var xhr = null; if(window.XMLHttpRequest) { ...
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- 使用原生ajax及其简单封装
原生ajax配置详解 // 原生ajax // 1. 创建ajax对象 if(window.XMLHttpRequest){ // // IE7+, Firefox, Chrome, Opera, S ...
- 原生ajax异步请求基础知识
一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...
- 原生ajax的请求函数
ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应 ...
- 原生Ajax发送请求
ajax get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...
- javascript js原生ajax post请求 实例
HTML代码: 注意: xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencod ...
- 原生 ajax get请求数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生Ajax的封装与使用
一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...
随机推荐
- Mysql安装错误:Install/Remove of the Service Denied!解决办法
Mysql安装错误:Install/Remove of the Service Denied!解决办法 在windos 的cmd下安装mysql 在mysql的bin目录下面执行: mysqld -- ...
- Eureka-zookeeper的服务发现替代方案
参考: https://my.oschina.net/thinwonton/blog/1622905 http://www.open-open.com/lib/view/open14269407225 ...
- bzoj 3560 DZY Loves Math V - 线性筛 - 扩展欧几里得算法
给定n个正整数a1,a2,…,an,求 的值(答案模10^9+7). Input 第一行一个正整数n. 接下来n行,每行一个正整数,分别为a1,a2,…,an. Output 仅一行答案. Sampl ...
- css3-动画(animation)
css3-动画(animation): 具有以下属性: 1.animation-name 自定义动画名称 2.animation-duration 动画指定需要多少秒或毫秒完成,默认值是0; 3.an ...
- NetworkExtension
一, 按照网上的方法: iOS 无法获取 WiFi 列表?一定是因为你不知道这个框架 提交了申请.两个小时候后苹果回应邮件.意思就是如果只是使用 App Proxy, Content Filter, ...
- 大R玩家体验时空猎人折扣平台多角度分析
<时空猎人>讲述了时空裂隙的出现,导致大批魔物入侵阿达拉大陆.玩家可扮演狼人.机械师.异能者.冰魄等职业,与这片大陆的人们保卫家园. 游戏拥有宠物.等战斗培养元素,还引入竞技场.攻城战等P ...
- Python3基础 dict get 在查询不存在的键时,返回指定的内容
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- git 如何revert指定范围内的commit并且只生成一个新的commit?
答:一共分成两步 一. revert多个commit并生成多个新的commit git revert <old commit>^..<new commit> 二. 使用reba ...
- php知识点-1
global 是在函数内部 声明一个 函数外部的变量(即所谓的全局变量, 而所谓的超全局变量是指 像 $_POST, $GLOBALS等之类的自动系统变量) 的一个别名. 在函数内部使用 unset( ...
- 【做题】CF177G2. Fibonacci Strings——思维+数列
题意:定义斐波那契字符串为: $f_1 = $ "a" \(f_2 =\) "b" \(f_n = f_{n-1} + f_{n-2}, \, n > 2 ...