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. 你相信吗:一加仑汽油可以给iPhone充电20年

    一直以来,苹果公司的iPhone系列手机受到了全世界人民的喜欢,很多人就此成为了果粉.或许是由于我们过于在意iPhone系列手机出彩的外形,所以忽略了很多关于iPhone手机有意思的消息,我们今天就来 ...

  2. Selenium&Pytesseract模拟登录+验证码识别

    验证码是爬虫需要解决的问题,因为很多网站的数据是需要登录成功后才可以获取的. 验证码识别,即图片识别,很多人都有误区,觉得这是爬虫方面的知识,其实是不对的. 验证码识别涉及到的知识:人工智能,模式识别 ...

  3. 网络爬虫url跳转代码

    from bs4 import BeautifulSoup from urllib.request import urlopen import re import random base_url = ...

  4. 阿里云vpc网络SNAT实现内网实例通外网

    需求场景: 因费用和安全考虑,内网部分机器没有分配公网IP,没绑定弹性公网IP,没有购买NAT服务,但是内网机器需要访问外网部分资源,如发送邮件. 操作步骤如下: 1.查看外网上的转发功能的开启没开启 ...

  5. WEB端缓存机制

    WEB端缓存机制 什么是WEB缓存 Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请 ...

  6. All Tips

    Outlook分享心得 这是在爱奇艺的一场Outlook分享会上我记录的笔记. Read More 分享一点"关于应届生如何写简历"的人生经验 应届生如何写好一份求职简历是一件重要 ...

  7. Quartz Tutorial 11 - Miscellaneous Features of Quartz

    文章目录 Plug-Ins Quartz提供了一个接口(org.quartz.spi.SchedulerPlugin) 用于插入附加的功能. 与Quartz一同发布的,提供了各种实用功能的插件可以在o ...

  8. Python——7列表生成式

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. 1、【Spark】Spark安装

    本文基于的环境 Red Hat Linux Enterprise 7 x86_64 jdk 1.7.0_79 Python 2.7Spart spark-1.5.2-bin-hadoop2.6 官方要 ...

  10. py函数式编程

    函数式编程把计算视为函数而非指令,纯函数式编程不需要变量,没有副作用,测试简单,python支持的函数式编程不是纯函数式编程,允许有变量存在,支持高阶函数,支持闭包,有限度的支持匿名函数 变量可以指向 ...