JavaScript案例-原生ajax

1.什么是ajax asynchronous javascript and xml (异步的js和xml) ajax不是编程语言,是一种在不重载整个网页的情况下 能够更新部分网页的的技术(异步请求,局部刷新) 2.什么是异步请求 主要是由事件引发 在不影响客户端其他操作的前提下,向服务器发送http请求 3.ajax的主要做什么(局部刷新) 局部刷新的优点 1.提高用户体验 2.减轻服务器的压力 4.ajax技术实质 利用XMLHttpRequest对象实现 5.ajax工作原理 客户端 <==> ajax(传输) <==> 服务端 6.XMLHttpRequest对象(异步数据读取) 1.创建XMLHttpRequest对象 1.ie浏览器 var xhr=new ActiveXObject("Microsoft.XMLHTTP"); 2.非IE浏览器 var xhr=new XMLHttpRequest(); 3.xhr对象最早是在ie5中,以ActiveX组件的形式实现 因为不是w3c标准,故实现方法不统一 但是在ie7以后统一使用xhr对象创建 4.判断浏览器是否支持ActiveX控件 window.ActiveXObject 不支持返回undefined 2.xhr对象的方法 1.open('method','url/file'[,async]) 准备建立和服务器的连接 method 请求方式 url 请求地址 只是拿到数据可以使用get,发送数据推荐使用post 2.send([data]) 向服务器发送http请求 参数只有在请求是post时是必需的 3.setRequestHeader('Content-type','application/x-www-form-urlencoded') 1.'Content-type','application/x-www-form-urlencoded' 表单默认的 2.'multipart/form-data' 当表单中有文件上传框时使用 3.当请求方式是post时使用本方法 3.xhr对象的属性 1.readyState属性 1.获取xhr对象的当前状态 返回xhr对象的状态码 2.xhr状态码 0 请求未初始化 1 初始化成功,服务器连接已经建立,未调用send方法 2 请求已接受 3 请求处理中 4 请求已完成,响应已就绪,客户端已接受全部的返回信息 2.status属性(http状态码) 200 服务器成功返回网页 404 请求的网页不存在 503 服务器暂时不可用 3.responseText属性 获取服务器响应的数据 4.ajax事件 1.onreadystatechange事件 xhr对状态码改变时自动调用本事件 2.onload事件 当xhr状态码为4时触发 3.onprogress事件 当xhr状态码为3时触发