Ajax-完美版教学 说明.docVIP

昨天内容回顾 ajax 对象创建 var xhr = new XMLHttpRequest(); var xhr = new ActiveXObject(‘Msxml2.XMLHTTP.6.0’); Microsoft.XMLHTTP 常用属性、方法 属性：readyState、responseText、responseXML、onreadystatechange 方法：open()、send()、setRequestHeader() 使用的4个步骤 创建对象、设置事件、创建新的http请求、发送请求 get、post请求 get请求： ① 参数以get形式在url地址后边通过请求字符串传递 ② 参数里边有特殊内容( = ? 空格 + 汉字等),需要编码encodeURIComponent() post请求： ① 参数在send()方法里边传递 ② 如果传递参数就需要设置header头信息,setRequestHeader()，把信息组织为xml格式 ③ 传递的参数里边如果有特殊内容( = ? 空格 + )与get方式一样，也需要编码 ④ 同时可以传递get参数信息，使用$_GET接收对应信息 同步、异步请求 ajax对象.open(方式，url地址，[true异步]/false同步); 案例 无刷新分页效果 ① 传统分页效果实现 ② ajax对象.open(请求方式,不同分页信息的url地址) xml处理 ajax负责请求xml内容 javascript的dom技术负责处理xml内容 缓存处理 ① 给请求地址后边设置随机数 open(方式,url?随机数) ② 给动态程序设置header头内容，禁止浏览器缓存 二．JSON 什么是json json: javascript object notation（js对象符号） 其是一种数据交换格式，xml也是数据交换格式，json对比xml的生成和处理要更加方便。 因此在许多领域，json正逐步取代xml的使用。 json_decode反编码json门户网站 json_decode 反编码json 门户网站 气象局服务器 (apache php mysql) PHP网站 PHP网站 java网站 java网站 接口(天气信息)/adat/sk/101010100.html 接口(天气信息) /adat/sk/101010100.html 数据格式：xml/json .net网站 .net网站 json_encode() json_encode() 生成json信息 javascript网站 javascript网站 天气预报接口数据需要通过一定的格式组织并提供出来，该数据格式最好还是各个语言都可以识别的，因此xml或json就被应用上了。 2. json的使用 2.1 javascript里边json体现 json在javascript里边就是字面量对象 var obj = {名称:值，名称:值，名称:function(){}} 2.2 通过php生成json信息 json_encode(数组/对象)------------生成json信息 2.3 php处理json信息 json_decode(json信息); 反编码json信息 对json字符串信息进行反编码，变为当前语言可以识别的信息。 2.4 javascript接收处理json信息 通过eval()把接收的json字符串变成真实的对象信息 3. json改造ajax无刷新分页 服务器端提供数据 服务器端 提供数据 ① css样式 ② html标签 ③ 数据data 客户端浏览器 绘制： css样式 html标签 ajax ajax ajax的每次请求都要从服务器获得三部分信息，对 带宽、服务器资源、用户等待时间 等资源都要占据三份，我们要做优化：把不发生变化的css样式、html标签 放到客户端手动生成，把服务器端的工作给减轻。 那么我们的数据就可以通过json格式传递回来(之前是html标签格式) json使用的好处： ajax的使用是对 带宽、用户等待时间、服务器资源 有节省 json的使用是在ajax的基础上对 带宽、用户等待时间、服务器资源 的进一步去节省。 三．无刷新表单信息提交 1. 收集表单信息 利用新技术FormData表单数据对象可以实现快速收集表单信息。 FormData是html5的新技术，在主流浏览器都可以正常使用。 总结： json数据交换格式 php里边：json_encode() json_decode(); javascript里边：eval()处理接收到json字符串 json改造无刷新分页 利用FormDat