封装好的Ajax
/*
注意：
1、检查提交方式类型：get/post是否和后台一致（该类型接口文档会标注，若一致仍然报错，请与后台再次确认）
2、检查接口url是否写错
3、检查接口是否需要传数据到后台，若需上传，便仔细把自己上传的数据和接口文档上对比，
观察有没有错写、多写、少写，数据格式是否正确（一般和后台人员确认一下要传什么数据格式），观察上传的值是否会出现undefined
4、若以上都正确了还是报错，那么便让后台人员看看是否是后台程序出错（一般http状态码返回500就是后台程序出错，但是也不排除是前端传递过去的数据不对导致后台报错）
6、如果出现跨域问题，就找后台解决
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax封装</title>
</head>
<body>
<!-- ajax：异步的javascript和XML，能够向服务器请求额外的数据而无需卸载页面，会带来更好的用户体验，包含XML但与ajax通信与数据格式无关 -->
<!-- ajax核心：XMLHttpRequert对象（简称XHR）；request（请求） -->
<script type="text/javascript">
// 封装
function ajax(method,_url,data,fun) {
// 1、定义一个xhr变量存放ajax对象
var xhr;
// 2、当window对象里面存在XMLHttpRequest时
if (window.XMLHttpRequest) {
// 实例化一个XMLHttpRequest()构造函数
xhr = new XMLHttpRequest();
} else {
// 为防止一些浏览器中没有XMLHttpRequest
// 当window对象里面没有XMLHttpRequest时就实例化一个ActiveXObject()构造函数
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} // 3、使用XHR时要调用open(a1,a2,a3);方法a1:请求类型,a2:请求的url,a3:是否发送异步请求(ture/false)
xhr.open(method,_url,true); // 4、send();请求在主体发送的数据
// 发送请求如果需要发送到服务器的端的数据,那么send(data) ,data:数据 需转换为字符串类型的
xhr.send(JSON.stringify(data));
//当readyState值每发生一次变化就调用一次onreadystatechange方法
xhr.onreadystatechange = function() {
// readystate为4代表已经接收全部响应数据,并且已经可以在客户端使用
if (xhr.readyState == 4) {
// readystate:状态为200时表示请求已经完全成功
if (xhr.status == 200) {
// responseText:作为响应主体被返回的文本
// JSON.parse():将字符串json转换为数组类型的json
// 把返回的数据responseText从string转换为JSON数据格式并打印出来
fun(JSON.parse(xhr.responseText));
}
}
}
} // 调用封装好的函数
ajax("get","http://192.168.95.237:81/ajaxapi/public/index.php/api/api/index",null,function(data){
document.body.innerHTML=data.code;
}); // post提交
var data={
stuid:"1027"
}
ajax("post","http://192.168.95.237:81/ajaxapi/public/index.php/api/api/selectuserid",data,function(data){
document.body.innerHTML=data.code;
}); /*
注意：
1、检查提交方式类型：get/post是否和后台一致（该类型接口文档会标注，若一致仍然报错，请与后台再次确认）
2、检查接口url是否写错
3、检查接口是否需要传数据到后台，若需上传，便仔细把自己上传的数据和接口文档上对比，
观察有没有错写、多写、少写，数据格式是否正确（一般和后台人员确认一下要传什么数据格式），观察上传的值是否会出现undefined
4、若以上都正确了还是报错，那么便让后台人员看看是否是后台程序出错（一般http状态码返回500就是后台程序出错，但是也不排除是前端传递过去的数据不对导致后台报错）
6、如果出现跨域问题，就找后台解决 */
</script>
</body>
</html>
封装好的Ajax的更多相关文章
- 不借助jquery封装好的ajax，你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- 封装通用的 ajax， 基于 jQuery。
在前端异步获取数据时候每次都是使用 ajax:为了通用性更好,然而封装通用的 ajax 是一个一劳永逸的办法. 本次基于 jQuery 封装实现: 第一步: 引入 jQuery: <script ...
- 封装、调用ajax
1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...
- 封装JavaScript的AJAX
// 创建request对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch ...
- 封装自己的Ajax框架
Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点 一.Ajax对象的创建 1.创建Ajax对象的方式 a.第一种方式是针对IE浏览器 b.第二种 ...
- AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- 使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
- 封装JS实现Ajax
这两天仔细理解了一下Ajax,然后整理封装了一下,如果有什么不对的地方,请指教,谢谢! AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScri ...
- 超简单 Promise封装小程序ajax 超好用 以及封装登录
//网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); ...
- 封装springmvc处理ajax请求结果
原文链接:http://blog.csdn.net/qq_37936542/article/details/79064818 需求描述:ajax向后台发起请求,springmvc在处理完请求后返回的结 ...
随机推荐
- springmvc快速入门（注解版本）
1)springmvc快速入门(传统版) 步一:创建springmvc-day02这么一个web应用 步二:导入springioc,springweb和springmvc相关的jar包 ------- ...
- 007-IP报文协议
一.概述 IP协议是将多个包交换网络连接起来,它在源地址和目的地址之间传送一种称之为数据包的东西,它还提供对数据大小的重新组装功能,以适应不同网络对包大小的要求. IP不提供可靠的传输服务,它不提供端 ...
- selenium webdriver常用函数
from selenium import webdriver driver = webdriver.Ie(executable_path = "e:\\IEDriverServer" ...
- Spring + MyBatis 框架下处理数据库异常
一.概述 使用JDBC API时,很多操作都要声明抛出java.sql.SQLException异常,通常情况下是要制定异常处理策略.而Spring的JDBC模块为我们提供了一套异常处理机制,这套异常 ...
- React Native常用的第三方开源库
记录一下自己暂目前了解和使用的一些开源库和官方文档和优秀博客介绍,希望对你有帮助☺️: 1.Toast: https://github.com/magicismight/react-native-ro ...
- Java内部类(4)：静态内部类&接口内部类
使用static修饰的内部类我们称之为静态内部类,不过我们更喜欢称之为嵌套内部类.静态内部类与非静态内部类之间存在一个最大的区别,我们知道非静态内部类在编译完成之后会隐含地保存着一个引用,该引用是指向 ...
- Python C/S架构,网络通信相关名词,socket编程
主要内容: 一. C/S架构 二. 网络通信的相关名词 三. socket编程 一. C/S架构和B\S架构概述 1. C/S架构: Client/Server(客户端/服务端)架构 描述: C/S ...
- V8的垃圾回收和内存限制
V8的垃圾回收和内存限制 前言 在第三次浏览器大战中,来自Google的Chrome浏览器凭借优异的性能成为聚光灯下的焦点.而Chrome的成功离不开站在其背后的JavaScript引擎V8. 随着V ...
- Mybatis batch 批量处理
@Testpublic void batch() throws IOException { InputStream inputStream= Resources.getResourceAsStream ...
- 【Web网站服务器开发】apache和tomcat 阿帕奇和汤姆猫
经常在用apache和tomcat等这些服务器,可是总感觉还是不清楚他们之间有什么关系,在用tomcat的时候总出现apache,总感到迷惑,到底谁是主谁是次,因此特意在网上查询了一些这方面的资料,总 ...