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 对象的三个重要的属性:
三、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax01</title> 6 <script src="ajax.js"></script> 7 </head> 8 <body> 9 <input type="button" id="btn" value="测试按钮"> 10 <script> 11 var btn=document.getElementById('btn') 12 btn.onclick=function (){ 13 //1.创建Ajax对象 14 var myajax=new XMLHttpRequest() 15 alert(myajax) //IE6及其以下版本不支持 16 /* 17 if (window.XMLHttpRequest){ //1、XMLHttpRequest对象时浏览器的window对象下的一个对象 18 var myajax=new XMLHttpRequest() //2、ajax向下兼容IE5和IE6的方法:选择结构 19 }else{ 20 var myajax=new ActiveXObject("Microsoft.XMLHTTP"); //3、ajax向下兼容IE5和IE6的方法:ActiveXObject对象 21 } 22 */ 23 } 24 </script> 25 </body> 26 </html>