ajax详解

来源：互联网发布：c语言实验报告流程图编辑：程序博客网时间：2024/06/14 09:38

Ajax: asynchronous JavaScript and xml (异步javascript和xml)
其是可以与服务器进行(异步/同步)交互的技术之一。
ajax的语言载体是javascript。其是浏览器的一个技术
最大特点：页面不刷新(用户体验非常好)

创建

<script>//主流浏览器方式创建var xhr = new XMLHttpRequest();//IE(6/7/8)方式var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);  //最原始方式var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);    //升级var xhr = new ActiveXObject(“Msxml2.XMLHTTP.3.0”);  //升级var xhr = new ActiveXObject(“Msxml2.XMLHTTP.5.0”);  //升级var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);  //IE维护的最高版本</script>1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

考虑浏览器兼容

if(typeof XMLHttpRequest !== 'underfind'){    //1.主流的浏览器    var xhr=new XMLHttpRequest();} else {    //IE(6/7/8)    var xhr=new ActiveXObject("Microsoft.XMLHTTP");    var xhr=new ActiveXObject("Msxml2.XMLHTTP");    var xhr=new ActiveXObject("Msxml2.XMLHTTPP.3.0");    //var xhr=new ActiveXObject("Msxml2.XMLHTTPP.5.0");    var xhr=new ActiveXObject("Msxml2.XMLHTTPP.6.0");    alert(xhr);   //[object]}1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

发起请求

创建ajax对象
创建一个新的http请求协议,并设置请求的服务器端地址
对象.open(请求方式get/post,url服务器端地址);
xhr.open(‘get’,’./02.php’); //这里xhr就是上面 ajax对象,后面就是处理文件
把http请求发送给服务器
对象.send(get-null/post请求数据);
xhr.send(null); //这是get这样写,post见后面

接受响应

ajax可以接收什么信息？
答：浏览器可以接收的信息ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等等。
ajax接收返回的信息,需要结合readyState/onreadystatechange/responseText等属性一并操作：
onreadystatechange事件最多感知4种状态改变信息:

<script>var xhr=new XMLHttpRequest();   //创建对象    xhr.onreadystatechange=function()   {    console.log(xhr.readyState);    //1,2,3,4状态信息}xhr.open(‘get’,’./02.php’); xhr.send(null); </script>1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

4种状态

常用属性和方法

属性：
responseText: 以字符串形式接收服务器端返回的信息
readyState:ajax对象状态
0: 创建ajax对象
1: 有调用open方法
2: 有调用send方法
3: 只返回一部分数据
4: 数据返回完整

onreadystatechange:
是ajax的”事件”，在readyState状态发生变化的时候被触发
为了感知最多的状态信息，要设置在对象创建完毕之后
最多可以感知”1/2/3/4”标志状态信息

方法：
open()创建新的http协议(请求方式、地址)
send()发送请求(post请求数据)

手册截图

get和post

ajax对象.open(get/post, 请求地址);
不同:
① 给服务器传递数据量
get方式的大小是受限于浏览器，大部分浏览器是2k的限制
每个浏览器的限制不一样 chrome就是8K
http://网址/index.PHP?name=tom
上述请求通过get方式传递了9个字节的信息
1024字节 = 1k
post原则没有限制，php.ini对其限制为8M
② 安全方面，post传递数据较安全
③ 传递数据的形式不一样
get方式在url地址后边以请求字符串形式传递参数
http://网址/index.php?name=tom&age=23&addr=beijing
蓝色部分就是请求字符串，就是一些“名-值”对，中间使用&符号连接。
post方式是把form表单的数据给请求出来以xml形式传递给服务器

get

ajax之get请求需要注意的两个地方：
① 在url地址后边以请求字符串(传递的get参数信息)形式传递数据。
② 对中文、=、&等特殊符号需要编码处理
对特殊信息的处理：
在浏览器里通过get参数传递一些特殊符号信息会被误解混淆，例如 & = 等，浏览器会把这样的信息当做get参数的一部分而进行一个错误的解析，为了避免这种情况发生，可以对该信息进行编码处理。有的浏览器传递中文会出现不识别问题，也可以进行编码处理。
(编码后的信息是相对底层的信息，浏览器会自动识别，获取的时候无需反编码)
①．在php里边可以函数 urlencode()/urldecode()对特殊符号进行编码、反编码处理
②．在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。
(以上红色函数可以把”特殊符号、中文”转变为浏览器可以识别不会混淆的信息。
编码后的信息为%号后接两个十六进制数)

这个函数编码一次,再进行编码是一样的

post

ajax之post请求需要注意的四个地方：
① 给服务器传递数据需要调用send(请求字符串数据)方法
② 调用方法setRequestHeader()把传递的数据组织为xml格式(模仿form表单传递数据)
③ 传递的中文信息无需编码，特殊符号像 &、=等仍需要编码
④ 该方式请求的同时也可以传递get参数信息，同样使用$_GET接收该信息

同步和异步

ajax对象.open(方式get/post, url地址, [异步true]/同步false);
ajax是可以与服务器进行(异步或同步)交互的技术之一。
异步：同一个时间点允许执行进程.
同步：同一个时间点只允许执行一个进程

什么时候使用同步请求?
ajax绝大多数情况下进行异步请求，但是有的时候也要使用“同步请求”(其不能被取代)。例如页面有两部分内容，①ajax请求内容和 ②正常的html内容输出，如果html的输出内容包括ajax请求的内容，就需要使得ajax请求完成了再进行html内容的输出，这样就要设置两者一前一后调用(而非同时调用)，既要进行同步请求。

xml接受和处理

客户端(javascript+dom)<———ajax<———-服务器端的xml信息 ajax负责请求xml和接收xml信息，dom负责处理xml信息

<body><div id="result"></div></body><script>var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){    if(xhr.readyState==4)   {        var xmldom=xhr.responseXML;        var msgs=xmldom.getElementsByTagName('msg');        var s='';        for(var i=0;i<msgs.length;++i)  {            var sder=msgs[i].getElementsByTagName('sender')[0].firstChild.nodeValue;            var jie=msgs[i].getElementsByTagName('jie')[0].firstChild.nodeValue;            var cnt=msgs[i].getElementsByTagName('content')[0].firstChild.nodeValue;            s+="发送者:"+sder+".接收者:"+jie+".消息:"+cnt+"<br />";        }        document.getElementById('result').innerHTML=s;    }}xhr.open('get','./test.xml');xhr.send(null);</script><?xml version="1.0" encoding="utf-8" ?><messages>    <msg>        <sender>tom</sender>        <jie>mary</jie>        <content>晚上一起去吃饭吧</content>    </msg>    <msg>        <sender>mary</sender>        <jie>tom</jie>        <content>不吃了,要去打球</content>    </msg></messages>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

JSON

json在javascript里边就是字面量对象
var obj = {名称:值，名称:值，名称:function(){}}

php生成json信息
json_encode(数组/对象)————>生成json信息
其中传进去一维数组是返回中括号的,其他是大括号.都是string类型
(json信息在php中的数据类型是字符串)

php处理json
json_decode(json信息，boolean); 反编码json信息
对json字符串信息进行反编码，变为当前语言可以识别的信息。对json字符串要求单引号定义
json_decode(json字符串,true)—>array
json_decode(json字符串,[false])—>object//基类

javascript接收处理json信息
ajax获得接口信息，javascript本身处理json信息
通过eval()把接收的json字符串变成真实的对象信息

js中把字符串对象变为实体对象信息
var obj=”{name:’kitty’,age:5}”;
eval(“var cat=”+obj);
eval(“var cat={name:’kitty’,age:5}”);

<button onclick="f1()">触发</button><script>function f1(){    var xhr=new XMLHttpRequest();    xhr.onreadystatechange=function(){        if(xhr.readyState==4){            eval("var cat="+xhr.responseText);            console.log(cat.city);            console.log(cat.wind);            console.log(cat.temp);        }    }    xhr.open('get','./test.php');    xhr.send(null);}</script><?php$jin_weather=array(    'city'=>'baidu',    'wind'=>'south',    'temp'=>26);$result=json_encode($jin_weather);echo $result;?>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

无刷新表单提交和进度条

ajax对象有成员upload，该upload成员是一个对象，本身有onprogress事件
该事件每间隔100ms左右就执行一次，执行的时候可以感知附件已经上传和总大小等信息，
使得“已经上传大小”和“总大小”做对比可以获得上传附件的百分比，进而就可以设置进度条。

利用新技术FormData表单数据对象，可以实现快速收集表单信息。
FormData是HTML5的新技术，在主流浏览器都可以正常使用。
可以利用FormData实现附件信息的收集:普通表单域和上传文件域均可以收集

FormData使用注意事项:
1,无需使用setRequestHeader()方法
2.要求每个表单域里面必须有name属性
3.表单域内内部有特殊符号($=&)无需编码
4.在form标签里边无需设置enctype=”multipart/form-data”属性(即使有上传文件域也不需要设置)

<script type="text/javascript">//javascript+ajax无刷新方式form表单提交window.onload = function(){     var fm = document.getElementsByTagName('form')[0];     //表单提交事件     fm.onsubmit = function(evt){     //① 收集用户输入的表单域信息[FormData]     var fd = new FormData(fm);//普通表单域 + 上传文件域信息     //② 并把收集的信息提交给服务器端[ajax]     var xhr = new XMLHttpRequest();     xhr.onreadystatechange = function(){     if(xhr.readyState==4){           alert(xhr.responseText);        }   }xhr.upload.onprogress = function(evt){     //该事件每间隔100ms左右就执行一次，    //并可以通过事件对象感知附件信息   //附件已经上传大小     var lod = evt.loaded;    //附件总大小     var tal = evt.total;     //上传百分比    var per = Math.floor((lod/tal)*100) + "%";     //给son的div设置宽度百分比                   document.getElementById('son').innerHTML= per;document.getElementById('son').style.width = per;}     xhr.open('post','./06.php');    xhr.send(fd);     //阻止浏览器form表单的提交动作     evt.preventDefault();     }}</script><style type="text/css">#pat {width:460px; height:40px;border:4px solid blue;}#son {width:0; height:100%; background-color:lightblue;}</style></head><body>   <h2>用户注册(无刷新方式附件上传)</h2>   <form method="post" action="./1001.php">   <p>用户名：<input type="text" id="mingzi" name="username" /></p>    <p>密码：<input type="password" id="mima" name="userpwd" /></p>    <p>邮箱：<input type="text" id="youxiang" name="useremail" /></p>   <div id="pat"><div id="son"></div></div>   <p>头像：<input type="file" id="touxiang" name="userpic" /></p>    <p><input type="submit" value="注册" /></p></form></body><?phpif($_FILES['userpic']['error']>0){    echo "false";}else {    echo "true";}?>

阅读全文

0 0