POST & GET & Ajax 全解

来源：互联网发布：集装箱号计算算法编辑：程序博客网时间：2024/06/17 23:28

GET&POST&Ajax 全解

一、POST和GET的区别

GET：GET方法提交数据不安全，数据置于请求行，客户段地址栏可见；GET方法提交的数据大小限制在255个字符之内。参数直接跟在URL后面清晰可见，该http请求的body部分也是空的，只有head部分显示了一个http的基本信息。

POST：POST方法提交的数据置于消息主体内，客户端不可见，POST提交的数据大小没有限制。POST方式发送的http请求，参数不是跟在URL后面的，而是存放在http请求的body部分的，请求参数在http在body中的存放形式类似GET方式。

二、Ajax的使用

（1）原生AJAX的使用

① 创建一个XMLHttpRequest对象

② 准备发送请求的数据： url

③ 调用XMLHttpRequest对象的open方法

④ 调用XMLHttpRequest对象的send方法

⑤ 为XMLHttpRequest对象添加onreadystatechage响应函数[XMLHttpRequest对象的readyState属性]

⑥ 在判断响应是否可用：XMLHttpRequest对象status属性值为200

⑦ 打印响应结果：responseText

Tip：在IE5，IE6不支持XMLHttpRequest，要通过ActiveXObject(“Microsoft.XMLHTTP”)来创建，实现效果一样。因此为了兼容所有的浏览器，我们通常会这样写：
var xmlhttp;

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();

}else{

xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

具体代码如下：

<script>    var xmlhttp;    function loadXMLDoc(url) {        xmlhttp = null;        if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.            xmlhttp = new XMLHttpRequest();        }        else if (window.ActiveXObject) {// code for IE6, IE5            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        }        if (xmlhttp != null) {            xmlhttp.onreadystatechange = state_Change;            xmlhttp.open("GET", url, true);            xmlhttp.send(null);        }        else {            alert("Your browser does not support XMLHTTP.");        }    }    function state_Change() {        if (xmlhttp.readyState == 4) {// 4 = "loaded"            if (xmlhttp.status == 200) {// 200 = "OK"                document.getElementById('A1').innerHTML = xmlhttp.status;                document.getElementById('A2').innerHTML = xmlhttp.statusText;                document.getElementById('A3').innerHTML = xmlhttp.responseText;            }            else {                alert("Problem retrieving XML data:" + xmlhttp.statusText);            }        }    }</script>

（2）jQuery中Ajax的使用

$.ajax({    type: 'POST',//GET, POST    url: '/index.php/Forum/checkNote',    data: {'note_title': title,'note_content': content,'note_type': type, 'srcUrl': srcUrl, 'note_author_id': '123456'},    success: function(msg) {        alert("发表成功！" + msg);        location.href = '/index.php/Forum/noteList?type=' + type;    },    error: function(XMLHttpRequest, textStatus, errorThrown,msg) {        alert(XMLHttpRequest.status);        alert(XMLHttpRequest.readyState);        alert(textStatus);        alert(errorThrown);        alert(msg);    },});

相对原生的XMLHttpRequest，jquery的Ajax显得更加精简，用起来也更加方便。

三、Ajax的JSON返回值及其解析

引题：浏览器与网页经常需要进行异步交互，由之前的XMLHttpRequest，我们基本上知道怎么有网页端向服务器发送数据了，但是，还要需要从服务器返回到网页呢。比如，用户登录的时候，除了要在服务器验证登录账号、密码，还需要在网页上面更新页面以及是否成功登录的状态信息呢，这种情况我们经常遇到的。这个时候就需要用到Ajax的回调函数并且对返回的JSON进行解析了。

首先，有必要介绍一下JSON以及Ajax的几个主要的参数：

什么是JSON？

json的原名：JavaScript ObjectNotation，json采用键/值的结构，简便易读，是一种轻量级的数据交换格式，主要用于跟服务器进行交换数据。跟XML相类似，它独立语言，在跨平台数据传输上有很大的优势。

json的格式： $res ={‘name’:’helios’,’age’:’22’,’sex’:’man’};

格式十分严格，中括号里面每一组用逗号分隔，一组里面一冒号分隔，冒号前面是属性值(键)，冒号的后面是属性值(值)。

多组JSON：

$info= [
{‘name’:’helios1′,’age’:’22’,’sex’:’man’},
{‘name’:’helios2′,’age’:’22’,’sex’:’man’},
{‘name’:’helios3′,’age’:’22’,’sex’:’man’}
];

Ajax的几个主要的参数：

(1) 回调函数：Function类型

其中，success, error都是回调函数，都是比较常用的几个回调函数，此外，还有beforeSend, dataFilter,complete。

各个函数功能如下：

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

(2) dataType：String类型

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：

"xml": 返回 XML 文档，可用 jQuery 处理。
"html":返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行
"script": 返回纯文本JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
"jsonp":JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

值得注意的是，dataType一定要与服务器发送的数据格式一致，如果dataType指定为json，发送的格式又是text，那么是不能用success成功接收成功的。

//PHP输出<?php$data = array('name'=>'XIONG','id'=>'123456');print_r($data);

<!--HTML代码--><!DOCTYPE><html><head>    <meta http-equiv="Content-Type:text/html;charset=utf-8">    <title>Ajax</title></head><button>点击</button><body><script src="jquery-2.1.1.min.js"></script><script>    $(function () {        $('button').click(function () {            $.ajax({                type: 'POST',                url: 'test.php',                dataType: 'text',                success: function (data) {                    var jsonObj = eval("(" + data + ")");                    console.log(typeof data + data);                    console.log(jsonObj);                    console.log(jsonObj.name);                    console.log(jsonObj['name']);                },                error: function (XMLHttpRequest, textStatus, errorThrown) {                    console.log(XMLHttpRequest);                    console.log(textStatus);                    console.log(errorThrown);                },            });        });    });</script></body></html>

运行如下：

在这种情况下，error回调被执行，并且返回parseerror。如果遇到情况，我们只需要将发送或者接收的数据格式换一下就好了。

下面介绍解决这类问题的几种方法：

① 用PHP中用json_encode(),将数组转为json形式的字符串，然后在Ajax中将dataType设为json格式接收。[推荐]

PHP代码：

<?php$data = array('name'=>'XIONG','id'=>'123456');//print_r($data);echo json_encode($data);

JS代码：

$('button').click(function () {    $.ajax({        type: 'POST',        url: 'test.php',        dataType: 'json',        success: function (data) {            console.log(data);            console.log(data.name);            console.log(data['name']);        },        error: function (XMLHttpRequest, textStatus, errorThrown) {            console.log(XMLHttpRequest);            console.log(textStatus);            console.log(errorThrown);        },    });});

运行如下：

② 用PHP中用json_encode(),将数组转为json形式的字符串，然后在Ajax中将dataType设为text格式接收，然后用eval转化为json对象。

PHP代码同上；

JS代码：

$('button').click(function () {    $.ajax({        type: 'POST',        url: 'test.php',        dataType: 'text',        success: function (data) {            var jsonObj = eval("(" + data + ")");            console.log(typeof data + data);            console.log(jsonObj);            console.log(jsonObj.name);            console.log(jsonObj['name']);        },        error: function (XMLHttpRequest, textStatus, errorThrown) {            console.log(XMLHttpRequest);            console.log(textStatus);            console.log(errorThrown);        },    });});

运行如下：

四、参考链接：

[1].深入理解HTTP协议：http://www.blogjava.net/zjusuyong/articles/304788.html

[2].thinkphp中ajax与php响应过程详解：http://www.jb51.net/article/58274.htm

[3].JQuery_1.9.1_手册CN.chm

[4].ajax处理数据格式为json的格式http://www.woshinannan741.com/?p=129

2 0