原生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 ...
随机推荐
- NGINX转发代理情况下,获取客户单真实IP
编译时加上http_realip_module 模块 realip模块生效的前提是:直接连接nginx的ip是在set_real_ip_from中指定的. 原机配置: set_real_ip_from ...
- MySQL按指定字段自定义列表排序
亲测实例: 1级排序:同城>异城 2级排序:未领养>以领养 3级排序:发布最新靠前 MYSQL语句如下: SELECT ura.id,ura.city,ura.uid,ura.rescue ...
- 如何成为一名合格的CTO?(转)
不会走出去公众演说的的攻城狮不是好CTO. 本文来源于微信公众号“线性资本”(ID:LinearVenture) 成为一名合格 CTO 我们投过很多技术型的公司,对于什么是合格的 CTO 有过自己的一 ...
- Redhat7.4 vim编辑无颜色解决
背景 发现使用vim时, 统一颜色, 不区分关键字 解决 vim /etc/profile 在文件的末尾加入下面这一行 export TERM=xterm
- Array数组集合的排序
/* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...
- Restful framework【第十一篇】url路由控制
基本使用 -url控制 -传统的url配置 url(r'^books/$', views.BookView.as_view()), url(r'^books/(?P<pk>\d+)$', ...
- 什么是TF-A?
1. TF-A的全称是什么? Arm Trusted Firmware 2. TF-A的作用是什么? 在secure world和non-secure world之间切换 3. TF-A涉及到哪几个部 ...
- slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出
html 父页面<div id="app"> <register> <span slot="name">{{message. ...
- POJ 3087 Shuffle'm Up(洗牌)
POJ 3087 Shuffle'm Up(洗牌) Time Limit: 1000MS Memory Limit: 65536K Description - 题目描述 A common pas ...
- 3、Python编程之MySQLdb模块(0602)
解释器环境与选项 python解释器启动 python [options] [ -c cmd | filename | - ] [ args ] python解释器环境变量 python代码的测试.调 ...