Ajax、open、json对象

130 阅读4分钟

Ajax工作原理 ajax.png

1、创建Ajax对象
var xmlHttp;
2、判断浏览器创建Ajax对象的方式

if(window.XMLHttpRequest){
//(包括IE7/8/9)firefox chrome浏览器支持,IE6不支持
    alert("标准写法(仅IE6不支持)");
}
if(window.ActivexObject){
//IE所有浏览器支持
    alert("所有IE支持,IE6只支持之中写法");
}

open方法:用于设置进行异步请求的目标URL,请求方法及其他参数信息
语法:
    open( "method" ,"url"[,asyncFlag]);
参数说明:
    method--方法get/post
    url一 请求指定地址,并且可以传递查询字符串
    asyncFlag-可选参数,用于指定请求方式,默认为true
        -- 当该boolean值为true时,服务器请求是异步进行的,也就是脚本执行
    send () 方法后不等待服务器的执行结果,而是继续执行脚本代码; 
        --当该boolean值为false时,服务器请求是同步进行的,也就是脚本执行
    send ()方法后等待服务器的执行结果的返回,若在等待过程中超时,则不再等待继续执行后面的脚本代码

setRequestHeader方法:为请求的HTTP头设置值。

语法:
    --setRequestHeader("label","value");
    --实例:setRequestHeader("Content-type","application/x-www-form-urlencoded");    
注意:setRequestHeader()方法必须在调用open方法之后才能调用

send方法:
    用于向服务器发送请求,如果请求声明为异步,则该方法将立即返回,否则将等到接收到响应为止
语法:
   send([数据]);

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当readyState属性改变时,就会触发onreadystatechange 事件。

readyState属性存有XMLHttpRequest的状态信息
readyState存储XMLHttpRequest的状态。从04发生变化。
    0:请求未初始化(还没有调用open())
    1:服务器连接已建立,但是还没有发送(还没有调用send())
    2:请求已接收,正在处理中(通常现在可以从响应中获取内容头)
    3:请求处理中,通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
    4:请求已完成,且响应已就绪,您可以获取并使用服务器的响应了。
status属性
    200: "OK"
    404:未找到页面
    500:服务器端错误

readyState存储XMLHttpRequest 的状态。从04发生变化。
    0:XMLHttpRequest对象还没有完成初始化。
    1:XMLHttpRequest对象开始发送请求。
    2:XMLHttpRequest对象的请求发送完成。
    3:XMLHttpRequest对象开始读取服务器的响应。
    4:XMLHttpRequest对象读取服务器响应结束。

status属性详解:
    1xx:信息响应类,表示接收到请求并且继续处理。
    2xx:处理成功响应类,表示动作被成功接收、理解和接受。。
    3xx:重定向响应类,为了完成指定的动作,必须接受进一步处理。
    4xx:客户端错误,客户请求包含语法错误或者是不能正确执行。
    5xx:服务端错误,服务器不能正确执行一个正确的请求。
    
responseText 获取服务器端字符串形式数据(包括字符串形式json数据)
responseXML获取服务器端XML形式数据


什么是json
    JSON指的是JavaScript对象表示法(JavaScript Object Notation)
    JSON是轻量级的文本数据交换格式
    JSON独立于语言
    JSON具有自我描述性,更易理解
    JSON使用JavaScript 语法来描述数据对象,但是JSON仍然独立于语言和平台。
    JSON解析器和JSON 库支持许多不同的编程语言。

var student = {
            name: "tom",
            age: 19,
            course: ["css", "js", "html"],
            teacher: { java: "liu", js: "zhang", CSS: "1i" },
            showmsg: function () {
                console.log(this.name);
                console.log(this.age);
                console.log(this.course);
                console.log(this.teacher);
            }
        }
        student.showmsg();
        
JSON语法规则
JSON语法是JavaScript对象表示法语法的子集。
    数据在名称/值对中
    数据由逗号分隔
    花括号保存对象
    方括号保存数组
    
Json的值
    数字(整数或浮点数),字符串(在双引号中),逻辑值( truefalse),数组(在方括号中),对象(在花括号中)
    null

json文件,json对象转换为字符串
JSON文件的文件类型是".json"
JSON文本的MIME类型是"application/json"eval() 
由于JSON语法是JavaScript语法的子集,
JavaScript函数eval()可用于将JSON文本转换为JavaScript对象。
JSON字符串:
    var str1 = '["name": "cxh", "sex": "man" }';
JSON对象:
    var str2 = { "name": "cxh", "sex": "man" };

实例:
var str='{names : "tom" ,ages:19} ';//json字符串
var strj=eval("("+str+")");
console.log(strj);
 
json字符串-->对象
    var abj = str.parselSON();//由jSON字符串转换为JSON对象(需要)
    var obij = JSON.parse(str);//由JSON字符串转换为JSON对象
json对象-->JSON字符串
    var last=obj.tolSONString();//将JSON对象转化为JSON字符
    var last=JSON.stringify(obj);//将JSON对象转化为JSON字符