原生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 ...
随机推荐
- Centos 7系统虚拟机桥接模式 固定ip
前言 本文主要给大家介绍了关于Centos 7系统虚拟机桥接模式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 主机ping不通虚拟机centos7系统的ip大多有以下原 ...
- atomic 原子操作
原子操作:操作仅由一个独立的CPU指令代表和完成.保证并发环境下原子操作的绝对安全 标准库代码包:sync/atomic atomic是最轻量级的锁,在一些场景下直接使用atomic包还是很有效的 C ...
- 关于__declspec(dllexport)
windows下dll动态库函数的导入与导出. __declspec Microsoft Specific __declspec ( extended-attribute ) declarator l ...
- oracle 12cR1&12cR2核心高实用性新特性
今天把本地环境升到了12.2.12c应该来说无论从性能和功能性方面都得到了很大的加强,就是不知道实际license怎么卖...原来有些功能在exadata中可用的,现在在12c中可用了,估计很大程度上 ...
- TensorFlow模型保存和加载方法
TensorFlow模型保存和加载方法 模型保存 import tensorflow as tf w1 = tf.Variable(tf.constant(2.0, shape=[1]), name= ...
- webpack对于引入的模块无法智能代码提示
前端模块太多了,模块里的方法比较难记住,所以我们一般靠的都是IDE的代码提示. 但是有时候我们会发现对于引入的模块没有代码提示,我也安装了模块呀,为什么没有代码提示? 主要是package.json的 ...
- C# 给类做事件的一般做法
https://docs.microsoft.com/zh-cn/dotnet/standard/events/how-to-raise-and-consume-events 第一个示例演示如何引发和 ...
- Win32汇编学习(4):绘制文本
这次,我们将学习如何在窗口的客户区"绘制"字符串.我们还将学习关于"设备环境"的概念. 理论: "绘制"字符串 Windows 中的文本是一 ...
- IDEA 入门
IDEA初步使用 IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾 IntelliJ IDEA 设置代码提示或自动补全的快捷键 (Alt+/) IntelliJ IDEA 配 ...
- Shiro学习笔记 三(认证授权)
第一种首先基于角色的权限控制 1.由于不断的创建SecurityFactory工程等步骤重复多次,所以应该将这些步骤封装成一个工具类 还是首先看一下目录结构 主要用到文件 首先贴一下工具类的方法 pa ...