js进阶课程ajax简介(ajax是浏览器来实现的)
js进阶课程ajax简介(ajax是浏览器来实现的)
一、总结
1、ajax使用需要服务器支持,比如phpstudy
2、ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest,这个对象时浏览器提供支持的,是浏览器windows对象的一个对象,window.XMLHttpRequest
3、ajax兼容性问题:大部分浏览器都支持ajax,IE6不支持ajax的XMLHttpRequest对象,但是支持ajax的ActiveXObject对象
二、js进阶课程ajax简介
准备工作
配置本地服务器环境,这里推荐安装:phpstudy,优点:一次性安装,无须配置即可使用,非常方便
Ajax 简介
什么是 Ajax ?
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
AJAX 可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
Ajax 的基本用法
- 创建 XMLHttpRequest 对象
语法:var myAjax=new XMLHttpRequest();
老版本的 IE(IE5 和 IE6)使用 ActiveX 对象:
var myAjax=new ActiveXObject("Microsoft.XMLHTTP"); - 向服务器发送请求:使用open() 和 send() 方法:
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- sync:true(异步)或 false(同步)
- send(string):string:仅用于 POST 请求
- open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
- 服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
- responseText 属性:responseText 属性返回字符串形式的响应
- responseXML 属性:如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性
- onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。
- XMLHttpRequest 对象的三个重要的属性:
- onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
- readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
- status:200: "OK"/404: 未找到页面
- XMLHttpRequest 对象的三个重要的属性:
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax01</title>
<script src="ajax.js"></script>
</head>
<body>
<input type="button" id="btn" value="测试按钮">
<script>
var btn=document.getElementById('btn')
btn.onclick=function (){
//1.创建Ajax对象
var myajax=new XMLHttpRequest()
alert(myajax) //IE6及其以下版本不支持
/*
if (window.XMLHttpRequest){ //1、XMLHttpRequest对象时浏览器的window对象下的一个对象
var myajax=new XMLHttpRequest() //2、ajax向下兼容IE5和IE6的方法:选择结构
}else{
var myajax=new ActiveXObject("Microsoft.XMLHTTP"); //3、ajax向下兼容IE5和IE6的方法:ActiveXObject对象
}
*/
}
</script>
</body>
</html>
js进阶课程ajax简介(ajax是浏览器来实现的)的更多相关文章
- js进阶 14 jquery的ajax有哪些函数和事件(多练)
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...
- js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化
js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...
- js进阶 14-2 如何用ajax验证登陆状态(这里用load方法)
js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...
- js进阶 14-1 jquery的ajax系列中的load方法的作用是什么
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互
一.ajax 1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json 2 ajax干啥用的?前后端做数据交互: 3 之前学的跟后台做交互的方式: -第一种:在浏览器 ...
- PHP AJAX 简介
AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是什么? AJAX = Asynchronous JavaScript and XML. AJAX ...
- js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)
js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...
- js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)
js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...
随机推荐
- ELK+KAFKA安装部署指南
一.ELK 背景 通常,日志被分散的储存不同的设备上.如果你管理数十上百台服务器,你还在使用依次登录每台机器的传统方法查阅日志.这样是不是感觉很繁琐和效率低下.当务之急我们使用集中化的日志管理,例如: ...
- 聊聊高并发(二十八)解析java.util.concurrent各个组件(十) 理解ReentrantReadWriteLock可重入读-写锁
这篇讲讲ReentrantReadWriteLock可重入读写锁,它不仅是读写锁的实现,而且支持可重入性. 聊聊高并发(十五)实现一个简单的读-写锁(共享-排他锁) 这篇讲了怎样模拟一个读写锁. 可重 ...
- 解决配置Ubuntu中vnc远程显示灰屏
解决配置Ubuntu中vnc远程显示灰屏a. 缺失图形化工具b. ~/.vnc/xstartup 权限不对1. Ubuntu 16.04 安装 VNC 及 Mate 桌面环境https://www. ...
- Cookie应用--显示看过的商品
package cn.itcast; import java.io.IOException; import java.io.PrintWriter; import java.util.LinkedHa ...
- 使用网络TCP搭建一个简单文件下载器
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶服务器Server 三丶测试TCP server服务器 四丶客户端Client 五丶测试客户端向服务器下载 ...
- CISP/CISA 每日一题 六
CISA 每日一题(答) 采用电子数据交换 EDI 的好处: 1.较少的书面工作: 2.较少的信息交换错误: 3.改善了数据库到数据库.公司到公司的信息流: 4.没有多余的数据重新键入: 5.较少的通 ...
- session应用二
从session中获取mapper对象,利用mapper对象进行增删改查 Date now = new Date(); SqlSession session = this.yangchebaoDbMa ...
- kafka同步生产者和异步生产者深入剖析
什么是kafka同步生产者,什么是kafka异步生产者? 比如这里某个topic有3个分区. kafka同步生产者:这个生产者写一条消息的时候,它就立马发送到某个分区去. kafka异步生产者:这个 ...
- JQuery 各节点获取函数:父节点,子节点,兄弟节点
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- Hadoop ecosystem 生态圈
Cascading: hadoop上面的workflow Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行 ...