8Ajax学习笔记-计算机.pdfVIP

Ajax 学习笔记 Java 相关课程系列笔记之十一 笔记内容说明 Ajax （程祖红老师主讲，占笔记内容100%）； 目 录 一、 Ajax 概述 1 1.1 什么是Ajax 1 1.2 Ajax 对象：如何获得Ajax 对象 1 1.3 Ajax 对象的属性2 1.4 编程步骤2 1.5 编码问题3 1.6 Ajax 的优点3 1.7 缓存问题（IE 浏览器）3 1.8 案例：简易注册（使用Ajax 进行相关验证，get 请求）4 1.9 案例：修改1.8 案例，使用post 请求6 1.10 案例：使用Ajax 实现下拉列表6 二、 JSON 7 2.1 什么是JSON 7 2.2 数据交换7 2.3 轻量级7 2.4 JSON 语法（ ）7 2.5 如何使用JSON 来编写Ajax 应用程序 8 2.6 案例：股票的实时行情9 2.7 案例：显示热卖的前3 个商品 10 2.8 同步请求 10 2.9 案例：修改1.8 案例step1 中的JS 代码（使用同步请求） 11 1 一、Ajax 概述 1.1 什么是Ajax Asynchronous Javascript And Xml （异步的JavaScript 和Xml ）。是一种用来改善用户体验的技术，其实质 是利用浏览器内置的一个特殊对象（XMLHttpRequest ，一般称之为Ajax 对象）异步地（Ajax 对象在向服务 器发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向服务器发送请求， 服务器送回部分数据（不是一个完整的新的页面，而是文本或者Xml 文档），在浏览器端，可以利用这些数 据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。 之前，都是先销毁原来的页面，然后发送请求，等待服务器发送响应，再生成新页面。 Ajax 的工作流程： 1.2 Ajax 对象：如何获得Ajax 对象 由于XMLHttpRequest （Ajax 对象）没有标准化，所以要区分浏览器。 function getXhr(){//注意：后面的案例都将用到此函数 var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest();//非IE 浏览器 }else{ xhr=new ActiveXObject(Microsoft.XMLHttp);//IE 浏览器 } return xhr; }  注意事项：后面的案例也会用到以下函数 function $(id){//依据id 返回dom 节点 return document.getElementById(id); } function $F(id){//返回id 对应的值 return $(id).value; } 1 1.3 Ajax 对象的属性 1）onreadystatechange ：绑定一个事件处理函数（监听器），该函数用来处理 readystatechange 事件。 Ajax 对象的readyState 属性发生改变，比如从0 到1，则会产生onreadystatechange 事件。 2 ）responseText：获得服务器返回的文本数据。