GET&POST&Ajax 全解

一、POST和GET的差别

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

POST:POST方法提交的数据置于消息主体内,client不可见,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。我们基本上知道怎么有网页端向server发送数据了。可是,还要须要从server返回到网页呢。比方,用户登录的时候。除了要在server验证登录账号、password。还须要在网页上面更新页面以及是否成功登录的状态信息呢,这样的情况我们常常遇到的。这个时候就须要用到Ajax的回调函数而且对返回的JSON进行解析了。

首先,有必要介绍一下JSON以及Ajax的几个基本的參数:

什么是JSON?

json的原名:JavaScript ObjectNotation,json採用键/值的结构。简便易读,是一种轻量级的数据交换格式,主要用于跟server进行交换数据。

跟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类型

预期server返回的数据类型。假设不指定,jQuery 将自己主动依据 HTTP 包 MIME 信息来智能推断,比方 XML MIME 类型就被识别为 XML。

在 1.4 中,JSON 就会生成一个 JavaScript 对象。而 script 则会运行这个脚本。随后server端返回的数据会依据这个值解析后。传递给回调函数。可用值:

  • "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一定要与server发送的数据格式一致,假设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>

执行例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

在这样的情况下,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

POST &amp; GET &amp; Ajax 全解的更多相关文章

  1. Ajax全解

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...

  2. js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解

    js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...

  3. js系列教程2-对象、构造函数、对象属性全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

  4. js系列教程1-数组操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

  5. jQuery Mobile 所有data-*选项,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

  6. jquery系列教程6-ajax的应用全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  7. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  8. 易全解token获取

    //易全解app             string strClientID = "2016061711434943493606";             string str ...

  9. IOS-UITextField-全解

    IOS-UITextField-全解   //初始化textfield并设置位置及大小   UITextField *text = [[UITextField alloc]initWithFrame: ...

随机推荐

  1. error: version in "./docker-compose.yml" is unsupported

    #sudo rm /usr/bin/docker-compose #curl -L https://github.com/docker/compose/releases/download/1.20.0 ...

  2. ios7与ios6UI风格区别

    http://apple.xdnice.com/content/applenews/2013/0614/142195.html         (ios7 ui风格) http://blog.csdn ...

  3. spring注解开发-IOC

    1. @Configuration, @Bean @Configuration该注解就是用来告诉spring这是配置类 @Bean该注解是用来注册一个bean.类型是返回值的类型,ID默认是用方法名作 ...

  4. LNOI2019划水记

    十二省联考命题组温馨提醒您: 数据千万条,清空第一条. 多测不清空,爆零两行泪. NOIp2018差点退役的游记 $Flag$拔了. $LNOI2019$划水记: $Day0$: 早上八点起床,一直颓 ...

  5. 大数据学习——Linux上常用软件安装

    4.1 Linux系统软件安装方式 Linux上的软件安装有以下几种常见方式: 1.二进制发布包 软件已经针对具体平台编译打包发布,只要解压,修改配置即可 2.RPM发布包 软件已经按照redhat的 ...

  6. 大数据学习——linux常用命令(五)

    1 挂载外部存储设备 可以挂载光盘.硬盘.磁带.光盘镜像文件等 1/ 挂载光驱 mkdir   /mnt/cdrom      创建一个目录,用来挂载 mount -t iso9660 -o ro / ...

  7. String字符串去掉双引号

    public static String stringReplace(String str) { //去掉" "号 String str= str.replace("\& ...

  8. 使用hadoop mapreduce分析mongodb数据

    使用hadoop mapreduce分析mongodb数据 (现在很多互联网爬虫将数据存入mongdb中,所以研究了一下,写此文档) 版权声明:本文为yunshuxueyuan原创文章.如需转载请标明 ...

  9. ZOJ 3824 Fiber-optic Network

    Fiber-optic Network Time Limit: 15000ms Memory Limit: 262144KB This problem will be judged on ZJU. O ...

  10. Charm Bracelet(01背包)

    Bessie has gone to the mall's jewelry store and spies a charm bracelet. Of course, she'd like to fil ...