手动实现AJAX
Ajax
描述
Ajax
在浏览器是通过XMLHttpRequest
对象来实现数据传输的。
XMLHttpRequest
对象进行HTTP
请求前必须通过open初始化,open
接受五个参数,分别为请求方法、请求链接、异步标识、账号和密码用以服务端验证。
open(Method, URL, Asynchronous, UserName, Password)
在成功初始化请求之后,XMLHttpRequest
对象的setRequestHeader
方法可以用来设置请求头。
setRequestHeader(key,value)
调用open()
方法后,就可以通过调用send()
方法按照open
方法设定的参数将请求进行发送。
send(Data)
当open
方法设定发送的方式为异步请求时,onreadystatechange
事件监听器将自动在XMLHttpRequest
对象的readyState
属性改变时被触发。
switch(readyState){
case 1: break; //当open方法被成功调用,readyState为1
case 2: break; //当send方法被调用,readyState属性被置为2
case 3: break; //HTTP响应内容开始加载,readyState属性被置为3
case 4: break; //HTTP响应内容结束加载,readyState属性被置为4
}
如果XMLHttpRequest
对象的readyState
属性还没有变成4
,abort
可以终止请求。这个方法可以确保异步请求中的回调不被执行。
abort()
ajax的简单实现
由于浏览器的同源策略(协议、url
、端口号任一不同都算为跨域请求),于是此代码需要打开百度的首页,在开发者工具的Console
直接执行,在Network
查看效果。
function ajax(url,method="GET",data=null,async=true) {
// 声明XMLHttpRequest //在IE5和IE6中需要使用ActiveX对象
var XHR = XMLHttpRequest;
// 创建XMLHttqRequest
XHR = new XMLHttpRequest()
// 设置请求状态改变时执行的函数
XHR.onreadystatechange = function() {
if (XHR.readyState === 4 ) console.log(`响应状态:${XHR.status}`,"FINISH") //XHR.responseText为响应体
}
// 初始化请求参数
XHR.open(method,url,async)
// 发起请求
XHR.send(data)
}
ajax("https://www.baidu.com");
ajax("https://www.baidu.com","POST","A=1&B=2");
每日一题
https://github.com/WindrunnerMax/EveryDay
手动实现AJAX的更多相关文章
- 手动封装AJAX
正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jQuery Mobile 手动显示ajax加载器,提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- 使用promise手动封装ajax函数
最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...
- 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)
自动发送 ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...
- jQuery Mobile 手动显示ajax加载器
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- ajax基础学习
AJAX即"Asynchronous JavaScript and XML",意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己 ...
- 快速理解-Ajax
AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...
- 讲解HTML服务器推送相关技术知识(转)
1. 为什么需要服务器推送? 最大的优点:实时 健康知识平台重庆男科医院 重庆妇科医院适用场景:实时股票价格.商品价格.实时新闻.Twitter/weibo timeline.基于浏览器的聊天系统 2 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
随机推荐
- Android多模块混淆的问题
Android在多模块或者组件化的时候,关于混淆的管理,一般常见的做法就是两条. 把所有的混淆规则规则都放在app模块下面,由app统一管理.这样就会有一个问题,就是到会导致混淆规则的冗余. 由mod ...
- iOS Swift 开发语言之初接触,纯代码创建UIView,UITableView,UICollectionView
1. 初始化Label设置AttributeString override func viewDidLoad() { let label = UILabel(frame:CGRect(x:,y:,wi ...
- web前端性能优化一
作为一个前端会允许自己的作品,在非硬性条件下出现卡顿? 肯定是不会,所以给大家梳理一下前端性能的优化. 一:文件操作 html文件压缩: 删除无用的空格和换行符等其他无意义字符 css文件压缩: 删除 ...
- 【Django】接收照片,储存文件 前端代码
后端: from rest_framework.views import APIView from car import settings from django.shortcuts import r ...
- java网络编程——socket实现简单的CS会话
还记得当年学计网课时用python实现一个简单的CS会话功能,这也是学习socket网络编程的第一步,现改用java重新实现,以此记录. 客户端 import java.io.*; import ja ...
- javascript常用工具函数总结(不定期补充)未指定标题的文章
前言 以下代码来自:自己写的.工作项目框架上用到的.其他框架源码上的.网上看到的. 主要是作为工具函数,服务于框架业务,自身不依赖于其他框架类库,部分使用到es6/es7的语法使用时要注意转码 虽然尽 ...
- vue学习笔记(四)
一.vue-router 1.简介 我们经常使用vue开发单页面应用程序(SPA).在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router.单页面应用程序看起来好像是一个页面 ...
- PHPRAP 1.0.2 发布,修复安装失败 Bug 和优化细节
PHPRAP,是一个PHP轻量级开源API接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造PHP版的RAP. 更新记录 [修复]修复在MySQL5.5版本下安装数据初始化sql文 ...
- VueX状态管理器 的应用
VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...
- 【面试必备】硬核!30 张图解 HTTP 常见的面试题
每日一句英语学习,每天进步一点点: 前言 在面试过程中,HTTP 被提问的概率还是比较高的.小林我搜集了 5 大类 HTTP 面试常问的题目,同时这 5 大类题跟 HTTP 的发展和演变关联性是比较大 ...