Ajax学习笔记-Ajax的封装-8

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">function ajax(options){//每次调用需要传递的参数太多，也很累。//就想着能不能把一些参数设置为默认参数var defaults={type:'get',url:'',data:{},header:{'Content-Type':'application/x-www-form-urlencoded'},success:function(){},error:function(){}}//使用options对象中的属性覆盖defaults对象中的属性//这样一来，如果调用时有设置的参数则使用定义的，没有的话就使用默认的Object.assign(defaults,options)var xhr=new XMLHttpRequest()//拼接参数路径var params=''for(var attr in defaults.data){params+=attr+'='+defaults.data[attr]+'&'}params=params.substr(0,params.length-1)//把最后一个&去除//判断请求类型，执行不同代码if (defaults.type =='get'){   xhr.open(defaults.type,defaults.url+'?'+params)xhr.send()}else if(defaults.type =='post'){xhr.open(defaults.type,defaults.url)var contentType=defaults.header['Content-Type']xhr.setRequestHeader('Content-Type',contentType)if(contentType=='application/json'){//如果参数是以json形式传递的，就直接传递，无需处理//但是参数传递需要是字符串，所以转化一下xhr.send(JSON.stringify(defaults.data))}else{//如果参数是以其他形式传递的，就需要处理拼接一下xhr.send(params)}}//服务器返回信息后，执行这里xhr.onload=function(){ //判断响应头中的数据类型var contentType=xhr.getResponseHeader('Content-Type')var responseText=xhr.responseText//如果响应类型中包含application/json,说明传过来的是的json对应的字符串if(contentType.includes('application/json')){//那就把它转换为json对象，其他类型的则不转换responseText=JSON.parse(responseText)}if(xhr.status==200){defaults.success(responseText,xhr)}else{defaults.error(responseText,xhr)}}}//调用ajaxajax({url:'http://localhost:3000/readystate',data:{name:'zhangsan',age:20},header:{'Content-Type':'application/json'},success:function(data){console.log(data)}})</script></body>
</html>

这次调用 ajax对应的路由：

app.get('/readystate',(req,res)=>{res.send({name:"zhangsan",age:199})
})

也就是说，这样封装之后，需要使用ajax的时候，只要调用函数就行：

//调用ajaxajax({type:'post'url:'http://localhost:3000/readystate',//请求参数data:{name:'zhangsan',age:20},//请求参数的类型header:{'Content-Type':'application/json'},success:function(data,err){//data对应服务器返回的信息//err对应服务器的处理信息：成功信息console.log(data)console.log(err)//想写什么样的功能就在这里写},error:function(data,err){//data对应服务器返回的信息//err对应服务器的处理信息：报错信息console.log(data)console.log(err)//想写什么样的功能就在这里写}})

Ajax学习笔记-Ajax的封装-8相关推荐

Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节全局 ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
前端学习笔记——Ajax
URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地址,才能正确定位资源 ...
小汪的ajax学习笔记
ajax 1.初识ajax 请求方式 1.get请求 2.post请求 2.1 setRequestHeader参数详解 3.状态码 4.ajax错误处理 5.ie低版本浏览器缓存问题 6.ajax封 ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
ajax学习笔记之一
2019独角兽企业重金招聘Python工程师标准>>> ajax与传统web的区别传统web应用:客户端浏览器提交请求-------服务端---------响应 ajax:客户端- ...
Java Script 学习笔记 -- Ajax
AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...
AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交
关于AJAX发送POST请求,首先演示一个小案例. 当输入用户名:张三,密码:123.点击发送请求按钮这是用post请求模拟的表单提交.接下来看一下如何用AJAX发送POST请求后端代码: @We ...
telerik grid ajax,Telerik ajax 控件学习笔记 - Ajax
产品版本:RadControls for ASP.NET Ajax Q1 2009 Telerik 的控件实现 Ajax 的方式比 asp.net ajax 要简单些.有如下特点: 1. 不需要拖放很 ...
Ajax学习笔记--- 【xmind 详细展示浏览器与服务器端通信，请求与响应报文】
php和express用来做后端,还是express强大和方便!!! 翻看笔记才知道自己当时下载Fiddler,Wampserver,phpstudy_pro是为了什么,实在不敢说自己学过php 文章 ...

Ajax学习笔记-Ajax的封装-8

Ajax学习笔记-Ajax的封装-8相关推荐

最新文章

热门文章