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属性还没有变成4abort可以终止请求。这个方法可以确保异步请求中的回调不被执行。

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的更多相关文章

  1. 手动封装AJAX

    正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  3. 使用promise手动封装ajax函数

    最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...

  4. 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

    自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

  5. jQuery Mobile 手动显示ajax加载器

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  6. ajax基础学习

    AJAX即"Asynchronous JavaScript and XML",意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己 ...

  7. 快速理解-Ajax

    AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...

  8. 讲解HTML服务器推送相关技术知识(转)

    1. 为什么需要服务器推送? 最大的优点:实时 健康知识平台重庆男科医院 重庆妇科医院适用场景:实时股票价格.商品价格.实时新闻.Twitter/weibo timeline.基于浏览器的聊天系统 2 ...

  9. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

随机推荐

  1. Android多模块混淆的问题

    Android在多模块或者组件化的时候,关于混淆的管理,一般常见的做法就是两条. 把所有的混淆规则规则都放在app模块下面,由app统一管理.这样就会有一个问题,就是到会导致混淆规则的冗余. 由mod ...

  2. iOS Swift 开发语言之初接触,纯代码创建UIView,UITableView,UICollectionView

    1. 初始化Label设置AttributeString override func viewDidLoad() { let label = UILabel(frame:CGRect(x:,y:,wi ...

  3. web前端性能优化一

    作为一个前端会允许自己的作品,在非硬性条件下出现卡顿? 肯定是不会,所以给大家梳理一下前端性能的优化. 一:文件操作 html文件压缩: 删除无用的空格和换行符等其他无意义字符 css文件压缩: 删除 ...

  4. 【Django】接收照片,储存文件 前端代码

    后端: from rest_framework.views import APIView from car import settings from django.shortcuts import r ...

  5. java网络编程——socket实现简单的CS会话

    还记得当年学计网课时用python实现一个简单的CS会话功能,这也是学习socket网络编程的第一步,现改用java重新实现,以此记录. 客户端 import java.io.*; import ja ...

  6. javascript常用工具函数总结(不定期补充)未指定标题的文章

    前言 以下代码来自:自己写的.工作项目框架上用到的.其他框架源码上的.网上看到的. 主要是作为工具函数,服务于框架业务,自身不依赖于其他框架类库,部分使用到es6/es7的语法使用时要注意转码 虽然尽 ...

  7. vue学习笔记(四)

    一.vue-router 1.简介 我们经常使用vue开发单页面应用程序(SPA).在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router.单页面应用程序看起来好像是一个页面 ...

  8. PHPRAP 1.0.2 发布,修复安装失败 Bug 和优化细节

    PHPRAP,是一个PHP轻量级开源API接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造PHP版的RAP. 更新记录 [修复]修复在MySQL5.5版本下安装数据初始化sql文 ...

  9. VueX状态管理器 的应用

    VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...

  10. 【面试必备】硬核!30 张图解 HTTP 常见的面试题

    每日一句英语学习,每天进步一点点: 前言 在面试过程中,HTTP 被提问的概率还是比较高的.小林我搜集了 5 大类 HTTP 面试常问的题目,同时这 5 大类题跟 HTTP 的发展和演变关联性是比较大 ...