网站地图    收藏   

主页 > 前端 > javascript >

js原生态ajax创建方法介绍(XMLHttpRequest)

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 在未出现jquery以前我们要创建ajax就必须自己使用XMLHttpRequest来创建ajax了,下面我把我多年前的写的ajax拿出来...

XMLHttpRequest

 代码如下 复制代码

<script type=”text/javascript”>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open(“GET”,”filefunction.php?dt=attatchment&u=abc.txt”,true);
xmlhttp.send();
}
</script>

下面来看看jquery+ajax/" target="_blank">jquery ajax应用

jQuery Ajax 事件

Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的,例如:

 代码如下 复制代码

 $.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

同时我们还可以直接使用如

jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中

jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求


这些都很不错,只适合小量input如果有大量的我们必须使用ajax - serialize() 方法方法了,如下

 代码如下 复制代码

html

<form  method="post" id="submitform"  name="submitform" ><tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="6%">手机:</td>
          <td width="21%"><input name="mo" type="text" class="inp" id="mo" size="17" /></td>
          <td width="8%" align="right">邮箱:</td>
          <td width="21%"><input name="email" type="text" class="inp" id="email" size="17" /></td>
          <td width="44%"><span class="gray"></span></td>
        </tr>
      </table></td>
      </tr>
    <tr>
      <td height="90" align="left">
        <textarea name="bak" cols="80" rows="5" class="lab" id="bak1"></textarea></td>
      </tr>
    <tr>
      <td><input name="button" type="button" class="but" id="buttonajax" value="提交留言" />
        <span class="gray">        </span></td>
      </tr>
    
 </form>

$('#buttonajax').click(function(){
 //alert($(this).val());
 //checkem();
 var postData = $('#submitform').serialize();
 //alert(postData);
 $.ajax({
  type: "POST",
  url: "/postajax.php",
  data: postData,
  success: function(msg){
   //alert(msg);
   if(msg==1){
    alert('您的问题已提交成功!');    
   
   }
  }
 });
})

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论