[妙味Ajax]第一课:原理和封装
2014-03-10 12:08
204 查看
知识点总结:
ajax是异步的javascrip和xml,用异步的形式去操作xml访问的是服务端,即https://127.0.0.1/ 或者 https://localhost
1、创建一个ajax对象(=打开浏览器)
存在兼容性方面的问题
var xhr = new XMLHttpRequest();
var xhr = new ActiveXObject('Microsoft.XMLHTTP); IE6
方法一: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } 方法二: var xhr = null; try{ //如果出错,则执行catch下的,并传入错误参数e xhr = new XMLHttpRequest(); // throw new Error('错误'),为手动报错,使用较少 } catch(e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6 }
2、open方法(=在地址栏输入地址)
xhr.open('post','1.txt',true)
参数:
1、打开方式
get :
通过url?名称=值&名称=值的方式进行传递,即url?username=joya&sex=female
url长度有限制,因此对传输的数据有大小限制
安全性问题,因为在url?后面,所以数据会被浏览器缓存起来,可以通过历史记录读取到数据
post :
通过表头的形式来传递,chrome需要审查元素-->network下查看,格式也是 => 名称=值&名称=值
长度没有限制
在php中,post方式可以用$_POST[]获取,get方式可以用$_GET[]获取,两种方式都可以获取,使用$_REQUEST[]
2、地址URL
3、是否同步
true :异步,非阻塞(一般使用此方法),setTimeout也是异步的
false :同步,阻塞,前面的代码后面需要用到,此时使用同步方式
3、发送请求(=回车)
// 如果要向表单post那样提交,需要使用setRequestHeader()添加HTTP表头,然后在 send() 方法中规定您希望发送的数据
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send();
4、等待服务器返回内容(=等待浏览器显示数据)
onreadystatechange 当readyState改变的时候触发
readyState 请求状态(ajax的工作状态):
0:(未初始化)还没有调用open()方法
1:(载入)已调用send()方法,正在发送请求
2:(载入完成)send()方法完成,已收到全部响应内容
3:(解析)正在解析内容
4:(完成)响应内容解析完成,可以在客户端调用
responseText :ajax请求返回的内容被存放在这个属性下
xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { //status进行查错处理,即查服务器状态,为http状态码 if (xhr.status == 200 ) { alert(xhr.responseText); } else { alert('出错了,error:'+xhr.status); } } }
reposeText是string类型,如果数据是类似json和数组的样子,则需要转换将string-->json/数组
alert(JSON) //注意:全是大写,ie7和ie6不支持JSON这个对象,解决方法:访问json官网json.org,下载javscript-->json2.js,把json2.js链接到页面
json2.js提供两个方法:
stringify:json/数组-->string,使用JSON.stringify()
parse:string-->json/数组,使用JSON.parse(),如是json,名称需要用“”括起来(严格模式),即json = '{"age",10}'
post和get需要的注意事项
get:
1 、在IE中有缓存问题,因此需要在后面加上一个随机数/时间戳,即Math.random()/new Date().getTime()
例如:'test.php?username=joya&age=10&' + newDate().getTime(),注:时间戳前面必须加上&
2、如果有中文,存在编码问题,需要转码,即:encodeURI()
例如:'test.php?username='+encodeURI('叶子')+'&age=10&' + newDate().getTime()
post:
1、不存在缓存和编码问题
2、发送请求头,申请发送的数据类型
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
数据是放在send()中作为参数传递,即:send('username=joya&age=10')
相关文章推荐
- js原生Ajax 的封装和原理
- js原生Ajax的封装和原理详解
- $.ajax实现原理(封装ajax)
- JQuery Ajax的实现原理以及二次封装通用的Ajax
- ajax请求原理及jquery $.ajax封装全解析
- Ajax原理与封装
- AJAX的实现原理以及封装
- Ajax原理和封装
- 《php---ajax简单示例---jquery内部运行原理》---jquery只是就ajax的一些功能进行了封装
- AJAX原理及封装
- Ajax实现原理,代码封装
- 第一课 protel学习系列——原理图库和封装库的制作
- 关于Ajax的原理以及代码封装详解
- jquery中ajax封装原理/封装jquery的ajax工具函数
- Ajax实例讲解与技术原理
- AJAX基础知识和核心原理
- ajax jsonp 原理 以及对数据的处理
- 原生js封装ajax,实现跨域请求
- jQuery的实现原理的模拟代码 -5 Ajax
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)