AJAX

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>
//创建xhr
function 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>";
?>

请求提交方式


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

<form enctype=""></foem>

取值:text/plain

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

使用post时,要在get的基础上改:

<script>
//创建xhr
function 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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值