Ajax的基础知识

Ajaxd的基础知识

.使用Ajax发送请求需要如下几步：

window.onload=function() {
var btn=documentElementById('btn');
btn.onclick=function() {
var uname=document.getElemnetById('username').value;
var pw=document.getElemnetById('password').value;获取两个数据

（1）创建xmlHttpRequest对象

var xhr=new XMLHttpRequest();

（2）准备发送

xhr.open('get'请求方式,'check.php'请求的url地址,'true'可以省略，true表示异步默认的，false表示同步);

（3）执行发送动作

xhr.send(null);get请求为null;post请求为传入的数据

（4）指定回调函数(浏览器调用)

xhr.onreadystatechange=function() {
         if(xhr.readyState==4)数据是否返回 {
服务器端获取的数据是否正确
              if(xhr.status==200) {
                  var data=xhr.responseText;
                 var info=document.getElementById('info');
                   if(data=='1')表示传入的数据是成功的 {
                                info.innerHTML=='登录成功';
                        }else if (data=='2')表示传入的数据是错误的 {
                                 info.innerHTML='用户名或密码错误';
                            }
                    }}}}}

11.Ajax发送请求的各个细节
(1)创建对象
Ie6版本的创建XMLHttpRequest对象的方法

if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}else {
xhr=new ActiveXObject('Microsoft.XMLHttp');
}

(2)准备发送xhr.open(1,2,3);
参数一：请求方式（get获取数据；post提交数据）
参数二：请求地址，如果是get请求，可以同时传递参数

xhr.open('get','01.php?username='+uname+''&password='+pw,true);

如果是post请求，直接写url地址，参数通过xhr.send(参数名)来传递；并且不需要encodeURL()转码，必须设置请求头信息，但是需要在第3步加上

xhr.setRequestHeader("Content-Type","application/x-www-form-urlrncode");

;而且xhr.send(参数名)；不为null
参数三：同步或者异步标志位，默认是true表示异步，false表示同步；如果是get请求那么请求参数必须在url中传递

(3)执行发送动作

xhr.send(null);

get请求这里需要添加null参数
(4)指定回调函数
xhr.onreadystatechange=function() {}
需要判断服务器端什么时候数据可以使用了if(xhr.readyState4)和数据是否正常if(xhr.status200)
完整的回调函数代码

xhr.onreadystateschange=function() {
if(xhr.readyStates==4&&xhr.status==200) {
                                                                                                                                 alert(xhr.responseText);打印返回来的数据类型
}

整个Ajax的请求步骤：

var xhr=null;
if(window.XMLHttpRequest) {
      xhr=new XMLHttpRequest();
}else {
xhr=new ActiveXObject("Microsoft"); 
}
xhr.open('get','调用的url地址',true);
xhr.send(null);
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200) {
                       var data=xhr.responseText;
                       var obj=JSON.parse(data);把json的数据转化成对象
                        var tag='<div><span></span></div>';把对象解析拼接到字符串当中
                       var info=document.getElemnetById('div');获取元素
                        info.innerHTML=tag;把内容放在元素里面

                          }
}

Ajax只支持两种形式的数据格式responseText和responseXML
12.json数据格式（javaScript Object Notation）类似用对象的形式描写数据
<1>新建一个.json文件，格式如下：

{
"name":'zhangsan',
"age":12,
"lover":["coding","swing","singing"]
}

json数据和普通的js对象的区别：

1.json数据没有变量
2.json形式的数据结尾没有分号
3.json数据中的键必须用双引号包住
Ajax调用json对象，直接在地址栏输入所建的json文件名
json可以把json形式的字符串解析成对象**：JSON.parse(data)data是要解析的字符串名**
把对象转换成普通的字符串： var str1=JSON.stringify(obj);
eval("("+data+")")eval的作用就是把字符串解析成js代码并执行
json_encode()作用：就是把数组转化成json形式的字符串
13.js的事件处理机制（单线程+事件队列）
事件队列中的任务执行的条件：
1.主线程已经空闲
2.任务满足触发条件
（1）定时函数（延时时间已经到达）
（2）事件函数（特定事件被触发）
（3)Ajax的回调函数（服务器端有数据响应）

13.新的方法封装Ajax

function(obj) {
var defaults={//设置默认的值
                   type:'get',
                   data:'{}',
                   url:'#',
                   dataType:'text'       
                   }
for(var key in obj) {
                 defaluts[key]=obj[key];
                  }
var xhr=null;
if(window.XMLHttpRequest) {
                       xhr=new XMLHttpRequest();
                       }else {
                              xhr=new ActiveXObject('Microsoft.XMLHTTP')        
                              }
xhr.open(defaults.type,defaults.url,true);
xhr.send();
xhr.onreadystateechange=function() {
if(xhr.Readystate==4 && xhr.status==200) {
       var data=xhr.responseText;
         }
}
} 

如果第二次Ajax请求依赖与第一次请求结果，那么第二次请求必须放在回调函数的内部