html如何用ajax连杰和苏局哭,ajax的探究与使用

最新推荐文章于 2024-09-04 19:41:32 发布

weixin_39766071

最新推荐文章于 2024-09-04 19:41:32 发布

阅读量4.3k

点赞数

文章标签： html如何用ajax连杰和苏局哭

前端必须掌握ajax，这是几乎所有前端招聘都会要求的一项。

但其实ajax也就是一种异步请求的技术，没有什么很深的东西，不过接触ajax很长一段时间了，早该整理下ajax的学习和使用：

PART1: 简单的例子

先通过一个简单地例子开始吧，通过请求一张图片来体验下(需要搭建服务器环境并开启服务器后才能正常使用ajax，以下的所有代码都是在服务器环境下测试的)：

html：

ajax

function ajax(){

var ajax;

if(XMLHttpRequest)

ajax = new XMLHttpRequest(); //IE7+，chrome，firefox

else

ajax = new ActiveXObject("Microsoft.XMLHTTP"); //超级老版本的IE

ajax.onreadystatechange=function(){

var state = ajax.readyState;

if(state==4&&ajax.status==200){

document.body.innerHTML=ajax.responseText; //responseText就是返回的文本信息

}

ajax.open("GET","response.php",true);

//三个参数相应表示：发送请求的方式(大小写均可，甚至大小写混用都行，但是可行不代表就应该这么用，还是用大写,培养良好的编程习惯)，请求的url，布尔值true表示使用异步的方式

ajax.send(); //什么数据都不发送

}

$("getPic").οnclick=function(){

ajax();

}

response.php，返回一个带有src的img标签：

echo""; //返回dom文档片段

于是点击按钮，就会通过异步请求的方式获取了一张图片并显示出来。此处省略截图。

PART2: 验证ajax异步请求方式

好问的同学此时会有疑惑，虽然open方法的第三个参数设置为true了，可是我怎么知道ajax请求真的就是异步的方式请求而不是同步的呢？

这个问题问得好，在下当时也是这么想的，那咱动手一试便知真伪。

修改下script代码，先看看异步情况是怎样的结果：

function ajax(){

var ajax;

if(XMLHttpRequest)

ajax = new XMLHttpRequest();

else

ajax = new ActiveXObject("Microsoft.XMLHTTP");

ajax.onreadystatechange=function(){

var state = ajax.readyState;

if(state==4&&ajax.status==200){

document.body.innerHTML=ajax.responseText;

console.log("ajax完成了，我可以出来了"); //请求发生完成

}

ajax.open("GET","response.php",true);

ajax.send();

console.log("hi，我是得到响应前的小可爱"); //同步编程

}

看下console的输出情况：

从这里可以看出使用的是异步方式，因为并没有等待ajax请求完成才执行下一步操作，console.log("hi，我是得到响应前的小可爱"); 先输出了。

改为同步编程的方式看看：

function ajax(){

var ajax;

if(XMLHttpRequest)

ajax = new XMLHttpRequest();

else

ajax = new ActiveXObject("Microsoft.XMLHTTP");

ajax.onreadystatechange=function(){

var state = ajax.readyState;

if(state==4&&ajax.status==200){

document.body.innerHTML=ajax.responseText;

console.log("ajax完成了，我可以出来了"); //请求发生完成

}

ajax.open("GET","response.php",false);

ajax.send();

console.log("hi，我是得到响应前的小可爱"); //同步编程

}

看下console的输出情况：

瞧，真的变成同步请求而不是异步请求了诶，先输出了请求完成的语句，这里ajax阻塞了主线程的执行，firefox还温馨提示不推荐使用同步ajax请求方式。

所以为了发挥ajax的真正作用，应该始终记得第三个参数是true，使用异步请求是ajax技术的初衷。

PART3: 获取JSON格式数据

由于一般使用JSON格式的数据来进行传输，所以修改下php，使得返回json数据：

echo '{"ajax":[{"name":"SUperman","number":1},

{"name":"苏苏","text":"byebye"}]}';

ajax函数也相应的修改：

function ajax(){

var ajax;

if(XMLHttpRequest)

ajax = new XMLHttpRequest();

else

ajax = new ActiveXObject("Microsoft.XMLHTTP");

ajax.onreadystatechange=function(){

var state = ajax.readyState;

if(state==4&&ajax.status==200){

var response = JSON.parse(ajax.responseText); //转化为JSON对象，ie7-不支持JSON对象

var array = response['ajax'];

console.log(response);

if(array){

var c = document.createDocumentFragment();

for(i = 0, len = array.length; i < len; ++i){

var p = document.createElement("p");

for(j in array[i])

p.innerHTML += ""+j+"："+""+array[i][j]+" ";

c.appendChild(p);

}

document.body.appendChild(c)

}

ajax.open("GET","response.php",true);

ajax.send();

}

通过请求的response看下ajax得到的数据，从php代码也可以知道：

要方便的使用json数据要先用JSON.parse()方法(ie7-不支持)将数据转化为JSON对象，浏览器显示的是：

PART4: GET方式发送参数及对应的值到后台

现在，除了获取后台的数据，我还想传递参数给后台处理，可以将参数添加在open方法的url后面，如：

ajax.open("POST","response.php?name=某某某&&year=19",true);

表示将参数name和year以及对应的值传递给后台，

还是在浏览器开发工具中查看下, parameters就不再是空的了，它显示了要传递的参数:

修改下php的代码，使得返回传递的参数和值：

echo '{"ajax":[{"name":"'.$_REQUEST['name'].'","number":'.$_REQUEST['year'].'},

{"name":"苏苏","text":"byebye"}]}';

结果如下：

看似一切正常。测试下浏览器，firefox和chrome是正常了，但是卧槽这放到ie就是歇菜的节奏啊：

这串"ijijij"哪来的，我的"某某某"呢，不科学！其实呢，这是字符编码的问题了，传递中文字符名-值对时应该先进行uri编码，

像这样：encodeURIComponent("某某某")；将字符串作为uri组件单独编码。

修改之后，ie中打开就一切正常了，

从下图可以看出中文字符已经编码了：

当然啦，写程序就是为了不做重复的工作，可以用encodeURI() 函数将整串的包含请求参数的字符串作为 URI 进行编码。

像这样：ajax.open("GET",encodeURI("response.php?name=某某某&&year=19"),true);妥妥的解决问题。

当涉及传递参数时应先进行编码再发送请求，否则若有中文字符什么的很容易就给跪了。

PART5： POST方式如何发送数据呢，据说url不能太长诶

我现在对send()方法感到好奇了，通常各种书本上的例子调用send()都是传递空参数，那怎么利用起来呢，顾名思义，这个方法就是用来传递数据给后台的呀。

尝试修改send()方法：ajax.send("name=苏&&year=7"); 并且设置open方法改为POST的方式，然后悲剧的发现什么都没发生，

parameters显示(当然如果你不肯改为POST方式，那么你会发现请求的parameters是空的，有木有更悲剧-_-||)：

卧槽，request payload什么鬼，同时发现http请求头部多了一点东西：

字符串长16是因为UTF-8 使用一至四个字节为每个字符编码。而中文汉字在utf-8中一般是占3个字节。所以这个长度是对的，但是却不能被后台获取到发送的数据。

赶紧上网找下资料，发现并没有对request payload有深入的讨论，表示有点伤心，但是提到了ajax使用post方式是想模拟表单post的方式来发送数据，也即form data的形式发送数据。

——————————————————————— 传说中的分割线 ——————————————————————————————

先来看看form表单如何发送请求。

对于这种get方式的form是没问题的：

parameters是querystring的形式：

而 http请求url是这样的：

aaarticlea/png;base64,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" alt="" />

改为post方式之后，http报头请求的url改变了，不携带参数了(或许这就是parameters是querystring的形式的原因)：

aaarticlea/png;base64,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" alt="" />

而且content-type改变了：

parameters也相应的变成了Form data的形式，这就是我们要模拟的表单提交数据的方式！

aaarticlea/png;base64,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" alt="" />

另外当将参数添加到表单的action指向的url后面(必须是post方式，否则报错)，而不是放在input中，parameters就变成和get方式一样了(再次相信这就是get方式下parameters是querystring的形式的原因)。

还需要指出的是，对于php响应表单的请求返回中文字符时不设置编码格式会跪掉的，给你显示乱码问你怕不怕。

ajax则不会，不过为了程序更加健壮，鲁棒性更强是吧，还是应该在response.php中设置传输的数据编码格式的：

header("Content-type: text/html; charset=utf-8");

嗯，完美，再也没有讨厌且恶心的乱码了。

——————————————————————— 结尾分割线 ——————————————————————————————

好了，回到post方式的ajax请求。为了模拟form data格式，要做的就是修改content-type了：

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

现在打开浏览器看看：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAABSCAIAAAB47seoAAAETklEQVR4nO2c25WrMAwAqcsFuR6qoRmKufcDEvySH+DIC8x8bRIiLDHYJnuOpn8Av2caPQB4BXgGGuAZaIBnoAGegQZ4BhrgGWiAZ6ABnoEGeAYa4BlogGegAZ6BBngGGuAZaIBnoMGjPFtnM9kl/w4MAc/0WOw0mXkdPYwh3N6zxU4NDHVumGfpGqkO5faeuTCf1bHORnskz/NsdtXCswTrbNRn9oRni90WGGe2jSeJ1Ef7F52P7eIfHiTnBsrl3XT/LbaxiNl841N7V6kp5d2zTNbCR/sXtwGm69BQohGaiZ5NQS2PFBZ7/O1nt39xf33UbA8UlMJ7+bnWaQpFLG/RslXN5lvjWW3K4Ym2w725N12QxU6TMSanUb1nQzQTPXOHnMkhro1z3FbX9NwQxey1qKyzib0oeyblW+NZZcrxidxYuYLEXzxP/o7+GZl1038nkebn/pQmpejOOeIULl8rjkvRsrnYabI2s5hm861bN+Us3NIlyvh9K3uejm4M0uyEZ8cqZZe4ji2eNa5vIu554t3Z9k5G49GeTXYpFKTfA8SwR5FWz8KBXvGsz23lLpSpsIvdPhZLPNqzYz7Lzbhd7Bj3xNvoWVgOb+fQUvRuoi3W31dHMT+exTs3Nwdx/k4mdd4zfwSVBemkx4Cfzb6cmc+Ep622oodVX2f5eaqmQMHDm/d+/qs1+wRvwrzkWRj5OFguSIVnFSUaqdmJ/Zmzk9h/0znn2b9v4f3qJyhVKPPDUlmz8nOP/6vW5XVT/F1SLEgXz4Zq9oD/B6Q1qRMYtLi/Z3AH8Aw0wDPQAM9AAzwDDfAMNMAz0ADPQAM8Aw3wDDTAM9AAz0ADPAMN8Aw0wDPQAM9AAzwDDfAMNMAz0ADPQAM8Aw3wDDR4lGet/Rz/eP/HJ4Fnd/Wse6+MnzbfuL1n5SZ7fv+d1uOlc16+IleD4NkwlOazLh0ELgfBs2G09kE+2TcZz9qhD3Lb8cGyG7TbDXIJexh9XotBPCq68pp0V+X6TjyVbZrPBXR5Yx/k1uPLwxFz8UyLr82VBj/hZXJPFZZTahyY6jLWL6DL6/sgt/dNjsaezeX7YdCyqsu6me1o604NYl/gsLVdz4Au7+yDfKlvcnZiTuSyXT8TpPeL/ZnQ3/VIsdhtuWtAlzf2Qb7YNznpWTaXcGJPBGlH0CJepJ0UW7stXwvo8r4+yJf7Jic9K6zMcfl/PJ8dL9w7qbXb8rWALq/rgzxf7puc3p9JuXw+LG7qWom3U4l2p2aevQk7N9TuAV1e2we59XiXqEJiLplHn/wjdnx8chBhPb1462wmY0x8LdNl7x7Q5ZV9kFuPl84YaRPkUngAj4NEQyl4ZrJdlaV7SSh794Au9/9/QPq2kBNvPf7GVN40GgHv7xlI/CHN8Oy5xD/ZDAyIZw9k30L3m8uuB8Qz0ADPQAM8Aw3wDDTAM9AAz0ADPAMN8Aw0wDPQAM9Ag//y0Sr8iPa/gwAAAABJRU5ErkJggg==" alt="" />

一切正常，parameters也是form data形式了。但是奇怪的是firefox中form data显示的name的值没有显示出来，还是将参数作为uri编码再发送吧：encodeURI("name=苏&&year=7"); 这下就能正常下显示了：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAABNCAIAAAAkWGFnAAAElUlEQVR4nO2aQYvaQBSA/RGBEKuIVNLdi4fF9VBEqKDQsoILC2X1IGUhNNCDlx4sLepBhB7sYS8KRaiXXARvHkTYm/9hz/6RHiYzySSTGDXq5u2D77CGN3HIt+/NmHmxXKGMRJ3Y2WeAHA5ahABahABahEAELerjhdG/Ofs0XhIHWmy0jafFknKah4sWXQgs/uj0+7//CPl4e88HN9rG01A/7aS3WDzHlM6NwGL9y1ehwtb3n+8/fDr/I0OLLsQV1S1SpNDrkbWGrMYuxw9cZGtoFt7WcDlr6/3p8mmxfBrq5Zw+JkOmnYZoSvZ72kr3nXkH8yb2MBLjDICJ57poF+mhsOxYF6edBnmOlgl9TEWSSCaV6aT+HlvUCovhFDIHD4/MYqP9SHXyX0SDhQEA8dvdEJHeCsuCXHSWOxbgiGwNl7P2nf/fHvfkP950ZnzeO6fkCgDIlj3qx9t7b4UBLRIrR7B415+yvLeS2PZF4gCAhPBLg19vXBWVVb+9LXIVtdE2bKWY2r3pzAS5KA4ASOgWy767m/0sWnufxXLW7nD/GeaS/DhmqWaWUKN/4xEAjwi+u0FcoEUIoEUIoEUIoEUIoEUIxN6k3iJRJybJcSTqoEUIoEUIoEUIQLPYrKpdVTE/qulVPV2QleN93QshuhYT3frFpEQ8Jbr1i2ft0g8aRoeAUhtdi/FmVaDEPxeFQwBwoEUtP99URoNkzajMN5X5pqiXJDkuyaXsaEOuVObr7LUiyXHpelDkgtfZa0VyDqT3dF4UWlS7OZGSXGZVSuw2JOKEYnFdnDNnhiordhPWRdOiLZgbSGQ7Bm7yNUW6+vbr39/PV/7PPTXRxEXVyygkwrBoCiD5RzOPovboRWLRbpRIoombr9HU7GmSbOZuUS8Fs2hRKKmTnML+RovBLI4GSVnhhHEVlbdoBhP9JHHJwE2+piT1dYXPRdNoEHKZ52pKkhPdurU0FkrqqpqBV0JPYTGpr1lSOnMxgEX/5dCD1ETLNGVFymWebc5IXjarFyw7QXI8i/vkonhB3V5Raf6p6ZXGCTOrK/QfjkeqqFTGaJDdJRclOc6WzF0smsJcexmuugImwr8XOXKZZ1JR5Ti3X62mzj+34wPF4usGLUIALUIglnl3iUQdtAgBrKgQQIsQQIsQQIsQQIsQePkWuWYZ8rLUdQgMtqEmIC/fonezjJpe0XenUBtqAnKIRcfhvv2ju3fGuxOnp6k963xDZFHcLFMoqexlN9SGmhNYjHOHulSJuHdmeyeOoe7WmZGaaK/i1OnoFu1HhsSoZ++MbZSrE4em5k4W+TP9V86h6yIthqRgGqrs1Tvj3YkTvLPGItGtA2/COKlFknl53fIh7J3x68TZw6JtX4NIYexRtfx8UxytbdscwRLo14nDLAauqM3qxWvoTzylRbNrhnXfSLKod8anE2dXi2p6hfua0C0e0H6IhMPhFsUt4cgpOciiWUv33GcioRGGRfuKiJyDCLxHRbaCFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiGAFiHwH5pv7HgzhNmAAAAAAElFTkSuQmCC" alt="" />

好像文章后面都要总结，可是也没什么好总结的了，就这样咯，写了好久，表示给跪。

-------------------------------转载注明出处^_^： http://www.cnblogs.com/suspiderweb/

关于form表单或者Ajax向后台发送数据时，数据格式的探究

最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求假设发送的数据是这样的: data = {'s ...

&dollar;(this)在ajax里面不生效的探究

第一个箭头时, 如果没有将$(this) 赋值给 _this ,那么$(this)就无法在ajax方法里面使用. 应该是应为他们属于不同的域. 赋值给_this的话, 就类似于全局变量

java深入探究13-js,ajax

链接:http://pan.baidu.com/s/1c2D0cAs 密码:uwm6 1.js 1)三种基本类型: var num=100; var str="哈哈"; var f ...

ASP&period;NET MVC - 探究应用程序文件夹

为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序. 第 2 部分:探究应用程序文件夹. MVC 文件夹一个典型的 ASP.NET MVC Web 应用程序的文件夹内容如下 ...

JSONP解决ajax跨域问题

在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

mvc中使用knockoutjs和ajax

虽然说knockoutjs 官网上写的非常的清楚!但是像我这样的英语呕吐患者,真是虐心啊!今天我写下做个记录,也为那些初次使用的同学给予帮助, 首先我说一下今天我说的内容只是应用不做原理探究,如果没有 ...

你真的懂ajax吗？

前言总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开始使用. damonare的ajax库: ...

Ajax+jquery+jaso传输数据

所谓的Ajax.这里我们讲二种方法方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Service ...

你真的懂 ajax 吗？

随机推荐

利用Render Texture实现游戏的小雷达效果(摄影机分屏)

最近游戏蛮牛在举办一个活动,就是要做出这样的效果: 题目:实现游戏分屏效果要求:1. 分屏,且分割线不规则(即非水平或垂直):2. 各屏可单独操作(移动.缩放),操作指该 ...

创建 Web 前端开发环境

Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...

select语句for update---转载

作用: Select…For Update语句的语法与select语句相同,只是在select语句的后面加FOR UPDATE [NOWAIT]子句. 该语句用来锁定特定的行(如果有where子句,就 ...

hdoj - 1258 Sum It Up &amp&semi;&amp&semi; hdoj - 1016 Prime Ring Problem (简单dfs)

http://acm.hdu.edu.cn/showproblem.php?pid=1258 关键点就是一次递归里面一样的数字只能选一次. #include #inclu ...

《effective java》读书札记第三条用私有构造器或者枚举类型强化Singleton属性

Singleton指只被实例化一次的类.一般用来搞那些创建很耗资源或者要求系统中只能有一个实例的类. 这个很经常使用.记得曾经实习面试的时候就有这个面试题. 一般採用的方法是将构造器私有化,然后提供一 ...

hdu&lowbar;5742&lowbar;It&&num;39&semi;s All In The Mind

题目链接:hdu_5742_It's All In The Mind 题意: 有一个部分的数列,让你找一个满足他给的三个条件的数列,使前两个数的和除这个数列的sum最大题解: xjb贪心一下就行了. ...

js 中的正则表达式RegExp

1.RegExp对象 1.1 RegExp对象实例的创建正则表达式模式: g:表示全局模式,即模式将被用于整个字符串,而非发现第一个匹配项时立即停止: i:表示不区分大小写,忽略大小 ...

HDU4185(KB10-G 二分图最大匹配)

Oil Skimming Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...

Spark Streaming源码分析 &ndash&semi; Checkpoint

PersistenceStreaming没有做特别的事情,DStream最终还是以其中的每个RDD作为job进行调度的,所以persistence就以RDD为单位按照原先Spark的方式去做就可以了, ...

OC开发&lowbar;Storyboard——UIApplication和网络活动指示器

一.UIApplication 只有一个实例: UIApplication *myApplication = [UIApplication sharedApplication]; 属性如果设置为YES ...