ajax 整理
ajax：通过在后台与服务器进行少量数据交换，使网页实现异步更新。也就是在不刷新页面的情况下，对网页的某些部分进行更新。
一、XMLHttpRequest用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax</title> 6 </head> 7 <body> 8 <section id="web"> 9 <section> 10 用户：<input type="text" id="name"> 11 信息：<input type="text" id="msg"> 12 <input type="button" value="确定" id="sub"> 13 </section> 14 </section> 15 <section style="border: 2px solid #0cf; margin-top: 30px;" id="returnmsg"> 16 17 </section> 18 </body> 19 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 20 <script> 21 $('#sub').click(function(){ 22 var msg = $('#msg'); 23 if($(msg).val() != ''){
// 创建XMLHttpRequest对象 24 var xhr = new XMLHttpRequest(); 25 xhr.timeout = 3000; 26 xhr.ontimeout = function(event){ 27 alert('请求超时！'); 28 } 29 var v = 'msg='+$('#msg').val()+'&name='+$('#name').val(); 30 //var v = "msg=a从GVc方便aa&t=bb飞规划局b"; 31 32 /* get方式提交 */ 33 34 //1. 设置向服务器端发送的数据，启动和服务器端的交互 35 xhr.open('get','ajaxtest.php?'+v, true); 36 //2. 设置向服务器端发送的数据，启动和服务器端的交互 37 xhr.send(null); 38 39 40 /* post方式提交 */ 41 /* 42 //1. 设置和服务器端交互的相应参数 43 xhr.open('post', 'ajaxtest.php', true); 44 //2. post方式交互，需要添加代码 45 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 46 //3. 设置向服务器端发送的数据，启动和服务器端的交互 47 xhr.send(v); 48 */ 49 50 /* 51 * 返回值方法 52 * xhr.onreadystatechange = 函数名(){} 注册回调函数 53 * */ 54 xhr.onreadystatechange = function(){ 55 if(xhr.readyState == 4 && xhr.status == 200){ 56 $('#returnmsg').html(xhr.responseText); 57 }else{ 58 alert(xhr.statusText); 59 } 60 } 61 } 62 }); 63 </script> 64 </html>
1 <?php 2 /** 3 * Created by PhpStorm. 4 * User: Administrator 5 * Date: 2018/3/23 6 * Time: 16:36 7 */ 8 header("content-type:text/html; charset=utf8"); 9 10 /*$msg = $_POST['msg']; 11 $t = $_POST['name'];*/ 12 13 $msg = $_GET['msg']; 14 $t = $_GET['name']; 15 16 echo $msg.$t;
判断浏览器的兼容性：
1 var xmlhttp; 2 3 function submit(){ 4 //1.创建XHLHttpRequest对象 5 if(window.XMLHttpRequest){ 6 //alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera"); 7 //IE7，IE8 ,FireFox。Mozillar、Safari，Opera 8 xmlhttp=new XMLHttpRequest(); 9 if(xmlhttp.overrideMimeType){ 10 xmlhttp.overrideMimeType("text/xml"); 11 } 12 }else if(window.ActiveXObject){ 13 //IE6,IE6.5 IE5 14 alert("IE6,IE6.5 IE5"); 15 var activexName = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 16 'MSXML2.XMLHTTP.4.0', 'msxml2.xmlhttp.3.0', 'MSXML2.XMLHTTP.2.0', 17 'MSXML2.XMLHTTP.1.0']; 18 for(var i = 0; i < activexName.length; i ++){ 19 try{ 20 xmlhttp = new ActiveXObject(activexName[i]); 21 break; 22 }catch(e){ 23 24 } 25 } 26 } 27 if(xmlhttp == undefined || xmlhttp == null){ 28 alert("当前浏览器不支持穿件XMLHttpRequest对象，请更换浏览器"); 29 return; 30 } 31 // 提交数据部分 。。。。 32 }
方法属性：
|
方法和属性 |
描述 |
|
Open（String method,String url,Boolean ansynch,String username,String password） |
指定和服务器端交互的HTTP方法，URL地址及其他请求信息。 |
|
其中method表示HTTP请求方法。支持所有HTTP的方法，一般使用“GET”，“POST”url表示请求的服务器的地址 Asynch表示是否采取异步方式，true表示异步，false表示同步 后两个参数可以不指定，usrename和password分别表示用户名和密码，提供http认证机制需要的用户名和密码 |
|
|
Send(content) |
向服务器发出请求，如果采用异步方式，该方法会立即返回 |
|
Content可以不指定或者指定为null表示不发送数据 其内容可以使DOM对象，输入流或是字符串 |
|
setRequestHeader(String header,String value) |
设置HTTP请求中的指定头部header的值为value。 |
|
getAllReponseHeader() |
返回包含HTTP的所有响应头包括Content-Length，Date，URI等内容 |
|
返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔 |
|
|
GetResponseHeader(String header) |
返回HTTP响应头中指定的键名header对应的值 |
|
Abort() |
停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态 |
|
responseText |
服务器响应的文本内容 |
|
ResponseXML |
服务器响应的XML内容对应的DOM对象 |
|
Status |
服务器返回的http状态码 200表示“成功”，404表示“未找到”。500表示“服务器内容部错误” |
|
statusText |
服务器返回状态码的文本信息 |
|
readyState |
表示XMLHttpRequest对象的状态 0=未初始化。对象已创建，未调用open 1=open方法成功调用以后。Send方法未调用 2=send方法已经调用，尚未开始接受数据 3=正在接受数据。Http响应头信息已经接受，响应数据尚未接受完成。 4=完成。响应数据接受完成。 |
|
Onreadystatechage |
请求状态改变的时间触发器（readyState变化时会调用这个属性上注册的javascript函数）
|
