ajax(2)
AJAX全称: Asynchronous JavaScript and XML ( 异步的JavaScript 和 XML)
Ajax的本质就是:XMLHttpRequest 对象;
案例:
var ajax=new XMLHttpRequest()
console.log(ajax)
从控制台中我们要学习三个属性和三个方法
三个属性:
readystate:状态的属性: 请求的5个阶段:0,1,2,3,4 只有最后一个阶段是成功的状态:前面的出错,都是前端的语法出错
responseText:返回的文件内容
status:状态码:200:成功了 404:表示文件没找到 5xx:代表服务器的问题 3xx:代表禁用的意思
从__proto__中学习三个方法
open() 向后台发送请求
send() 发送
onreadystatechange() 服务器响应
Ajax=异步javascript和xml
xml是一种数据存储格式 (不过由于为严格模式,对开发不友好,已被抛弃了)(必须是双标签)
json 是一种数据存储格式:(简单,易操作,是当前最流行的)
Ajax的工作原理:

Ajax的使用方法:
第一步: 创建XMLHttpRequest 对象:
var xmlhttp=new XMLHttpRequest();
第二步:给后台发送请求:
xmlhttp.open(参数一,参数二,参数三) 参数一:请求的方式:get/post 参数二:后台的地址(类似于url) 参数三:同步/异步(true代表异步:false代表同步);
第三步:发送:
xmlhttp.send()
第四步:服务器响应:
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readystate==4){
if(xmlhttp.status==200){
两个添加判断为:请求成功后,后台向客户端传入数据的阶段;
将其封装成函数,用于数据处理
fn(xmlhttp.responseText)
}
}
}
function fn(data){
var arr=JSON.parse(data) //JSON格式,后台传入的数据都是字符串 JSON字符串转换为JSON的格式用parse的方法;
document.getElementById("div").innerHTML=arr[0].name; 在指定的元素下面插入从后台返回的数据
}
这就是Ajax的原理
ajax(2)的更多相关文章
- AJAX(一)
AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...
- 又是一周-AJAX(三)
hi 我又食言了,但我还是厚颜无耻的回来了... 1.AJAX(三) 三.AJAX的简单的例子 3.1 简介 完成:查询员工信息,通过输入员工编号查询员工的基本信息+新建员工的信息,包含员工姓名,编号 ...
- AJAX(二)AJAX框架
上文(AJAX(一)AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们 ...
- Python开发【前端】:Ajax(二)
原生Ajax.JQuery.伪Ajax三种方式使用优先级 如果发送的是[普通数据] jQuery XMLHttpRequest iframe 如果发送的是[文件] iframe jQuery(Form ...
- AJAX(XMLHttpRequest)进行跨域请求方法详解
AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解
js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...
- [YII2] 去除自带js,加载自己的JS,然后ajax(json)传值接值!
本想用YII2自带的JS,可是用着效果不好,想从新加载,找了好多终于实现啦!还有ajax(json)传值接值! 首先直接了当的就把YII2自带的js去掉! 把下面代码加入到/config/main.p ...
- ASP.NET MVC之Unobtrusive Ajax(五)
前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive ...
- Ajax (一)
Ajax:即异步的XML和Javascript,在不刷新和提交的情况下,页面局部更新,实现前后端分离. Ajax的核心对象是XMLHttpRequest,服务器通过xhr对象与浏览器异步通信 关于HT ...
随机推荐
- temp 和 tmp 文件
TMP和TEMP文件是各种软件或系统产生的临时文件,也就是常说的垃圾文件.Windows产生的临时文件,本质上和虚拟内存没什么两样,只不过临时文件比虚拟内存更具有针对性,单独为某个程序服务而已.而它的 ...
- 2018-2019-2 20175306实验一《Java开发环境的熟悉》实验报告
2018-2019-2 20175306实验一<Java开发环境的熟悉>实验报告 一.实验内容及步骤 实验一 Java开发环境的熟悉-1 ·建立有自己学号的实验目录. ·通过vim Hel ...
- 关于t,f test
我也是佛了 这么基础的概念其实每次都会搞混一些 首先我们针对variance求一个estimator s 然后对于任意置信区间 (sample mean +- 你所需的置信百分比的t * SE(SE就 ...
- 服务发现 consul cluster 的搭建【转】
consul cluster setup 介绍和指南: consul用于服务发现.当底层服务发生变化时,能及时更新正确的mysql服务IP. 并提供给业务查询.但需要自行编写脚本,监测数据库状态和切断 ...
- 安装YApi 接口管理平台
yum install mongodb yum install -y nodejs git clone https://gitee.com/mirrors/YApi.git 克隆项目到本地 使用命令进 ...
- noip2018游(AFO)记
Day 0 到学车了,已经差不多四点了,领完一小袋比赛要用的就匆匆回了宾馆. 话说之前看地图的时候我们的宾馆最远,而且名字听起来并没有怎么高大上, 一看隔壁度豪大酒店就感觉应该比我们的酒店好.然鹅到了 ...
- C# this关键字的四种用法
Go to below URL to find more details and example. http://blog.csdn.net/longlong821/article/details/7 ...
- 图文详解之ZSH美化你的终端CLI
在这个博客中,我将介绍安装ITerm2,ZSH shell,“我的ZSH”,主题,ITerm2配色方案,“我的ZSH”插件,并启用“连线”支持,以帮助创建一个美丽而强大的终端. 如果你想让你的常规Ba ...
- js数据结构与算法——队列
<script> //创建一个队列 function Queue(){ let items = []; //向队尾添加一个新的项 this.enqueue = function(eleme ...
- Python3学习笔记(urllib模块的使用)
转载地址:https://www.cnblogs.com/Lands-ljk/p/5447127.html 1.基本方法 urllib.request.urlopen(url, data=None, ...