AJAX

来源：互联网发布：java动态表单组件编辑：程序博客网时间：2024/06/06 07:18

AJAX

AJAX：Asynchronous JavaScript and XML 异步的JavaScript和XML
同步：一步步完成事
异步：同时完成几件事
AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求。
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容。
核心：异步的JavaScript对象XMLHttpRequest（xhr）。
IE5.5，6：ActiveXObject(“Microsoft.XMLHttp”)
IE7,8,9，Chrome FireFox：new XMLHttpRequest()

判断浏览器是否支持XMLHttpRequest：

if(window.XMLHttpRequest){    //该浏览器支持XMLHttpRequest，可以直接new}else{    //创建ActiveXObject("Microsoft.XMLHttp")}

创建XMLHttpRequest对象：

function createxhr(){   var xhr=null;   if (window.XMLHttpRequest){      xhr=new XMLHttpRequest();   }else{      xhr=new ActiveXObject("Microsoft.XMLHttp");   }   return xhr;}

方法

open(method,url,asyn)—–创建请求
method请求类型：get,post,delete
asyn：bool类型值，false同步，true异步
send(body)—–发生请求，body是请求体
当请求方式为get的时候，body必须为null
当请求方式为post的时候，body为具体请求提交的数据
格式为：“key=value & key1=value1 &…”
setRequestHeader()—-指定请求消息头
当请求方式为post时，必须使用setRequestHeader重新设置请求消息头，否则请求数据获取不到。
abort()——取消请求
setAllResponseHeaders()—–获取响应消息头
getRequestHeader()——–获取指定的响应消息头

属性

onreadystatechange
当准备状态改变的时候，要调用的函数（回调函数）是谁
readyState—-(本身在xhr上)
xhr的请求状态，请求状态必为以下5中状态之一
0：尚未初始化
1：初始化完成，正在发生请求
2：请求完成
3：正在接受响应数据
4：xhr数据接收（响应）成功
states——–由服务器返回的状态码（本身在服务器上）
200：请求成功
404：资源未找到
500：服务器内部错误，如php代码写错了
注意：完整的判断xhr是否与服务器进行成功的请求响应必须是

xhr.readyState==4 && xhr.status==200;

responseText——-服务器返回的文本
responseXML——服务器返回的xml文本

发生异步请求的步骤

获取或创建AJAX对象：获取XMLHttpRequest对象
创建请求：调用xhr的open方法
设置回调函数：指定xhr的onreadystatechange事件
发生请求

例子：

<script>//创建xhrfunction createxhr(){   var xhr=null;   if (window.XMLHttpRequest){      xhr=new XMLHttpRequest();   }else{      xhr=new ActiveXObject("Microsoft.XMLHttp");   }   return xhr;}function getServerText(){   //获取xhr   var xhr=createXhr();   //创建请求   xhr.open("get","server.php",true);   //设置回调函数   xhr.onreadystatechange=function(){      if(xhr.readyState==4 && xhr.status ==200){         var resText=xhr.responseText;         document.getElementById("showText").innerHTML=resText;      }   }   //发生请求   xhr.send(null);}</script><body>   <div id="showText"></div>   <a href="javascript:getServerText();">提交数据</a></body>//server.php:<?php   echo "<h1>hello world</h1>";?>

请求提交方式

get
http://url/aaa.php?name=abc&age=18&gender=male
php:$_REQUEST[“name”]
post
xhr.open(“post”,url,true);
xhr.send(“name=zs&age=18&gender=malse”);

表单提交数据的Content-Type请求消息头

<form enctype=""></foem>

取值：text/plain

application/x-www-form-urlencoded—默认
multipart/form-data——-提交的有文件时，如传头像

使用post时，要在get的基础上改：

<script>//创建xhrfunction createxhr(){   var xhr=null;   if (window.XMLHttpRequest){      xhr=new XMLHttpRequest();   }else{      xhr=new ActiveXObject("Microsoft.XMLHttp");   }   return xhr;}function getServerText(){   //获取xhr   var xhr=createXhr();   //创建请求   var url="server.php";   xhr.open("post",url,true);//去掉url后的变量   //加上   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   //设置回调函数   xhr.onreadystatechange=function(){      if(xhr.readyState==4 && xhr.status ==200){         var resText=xhr.responseText;         document.getElementById("showText").innerHTML=resText;      }   }   //改发生请求   xhr.send("name="+name+"&age="+age);}</script><body>   <div id="showText"></div>   <a href="javascript:getServerText();">提交数据</a></body>//server.php:<?php   echo "<h1>hello world</h1>";?>

jQuery对AJAX的支持

load()：将服务器返回的文本添加到符合要求的节点上
用法：$obj.load(请求地址，请求参数);
请求参数：”username=tom & age=22”
或者 {‘username’:’tom’,’age’:’22’}
有请求参数时，load方法发生post请求，否则发生get请求
get()：发生get类型的请求
用法：$.get(请求地址，请求参数，回调函数，服务器返回的数据类型)
注：回调函数添加的参数是服务器返回的数据
服务器返回的数据类型：
html：HTML文本
text：文本
XML：XML文档
JSON：js对象
script：JavaScript脚本
ajax()：
用法：$.ajax({ });
{ }内的参数：
url—–请求地址 type：请求类型
data—–请求参数 dataType：服务器返回的数据类型
success：服务器处理正常对应的回调函数
error：服务器出错对应的回调函数
async：true（缺省），当值为false时，发生同步请求。

AJAX表单操作

使用AJAX提交数据：

获取表单元素通过document.getElementById或者jQuery的工厂函数获取页面元素值
将获取的页面元素值拼凑成字符串或者json字符串
使用AJAX异步提交表单

如：
一：获取表单元素：

loginname=$("#txtLoginName").val();password=$("#txtLoginPwd").val();hobbys=$("input[name=hobby]:checked");//获取多选项的值gender=$("input[name=rdoGender]:checked").val();//获取单选项的值

二，拼凑字符串

var logininfo="loginname="+loginname+"&password="+password+"&gender="+gender;for(var i=0;i<hobbys.length;i++){   logininfo+="&hobbys[]="+hobbys.get[i].value;}

表单的序列化
序列化：将对象状态转换为可保持或传输的格式过程
表单序列化：将表单元素转换为可提交的字符串或者JSON字符串
通过序列化可以轻松的实现数据存储和传输
在jQuery中可以通过serialize()方法将表单元素序列化成普通字符串，通过serializeArray()方法将表单元素序列化成json字符串。

serialize()方法：
格式：var data=$("#formId").serialize();
功能：将表单内容序列化成一个字符串

serializeArray()方法：
格式：var jsonData=$("#formId").serializeArray();
功能：将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。
比如：[{"name":"WCM","age":"18"},{...}]获取数据为jsonData[0].name

异步表单提交：
一：获取表单提交方式，服务器地址，序列化表单
二：通过AJAX异步的将内容提交给服务器
三：表单提交方法中返回false，即阻止表单默认提交。

使用jQuery.form异步提交表单（插件）：
ajaxForm()：不能提交表单。在ready函数中，使用ajaxForm来为AJAX提交表单进行准备
ajaxSubmit()：马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

阅读全文

0 0