学生管理系统开发记录-ajax异步请求的实现

在学习和搜索的过程中，学习到了如何明确表达自己的需求，先说清楚自己想要什么样的功能，再去实现会比较高效。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
XMLHttpRequest 对象用于和服务器交换数据

ajax异步请求的实现

页面中有一个表单，点击确定按钮即触发函数loadTable()。

<form method="get" id="myForm">
	<!--我的表单内容-->
	 <button type="button" onclick="loadTable()" id="b1">确定</button>
</form>
<div id="myTable" class="myTable"></div>

使用post方法向服务器发送请求

  function loadTable(){
  	//使用formdata方法获取表单的内容
    var myForm = document.getElementById("myForm");
    var formdata=new FormData(myForm);
    
    var xmlhttp;
    if (window.XMLHttpRequest)//检查浏览器是否支持XMLHttpRequest
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器
        //创建XMLHttpRequest 对象
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myTable").innerHTML=xmlhttp.responseText;
        }
    }
    //规定请求的类型、URL 以及是否异步处理请求
    xmlhttp.open("POST","SearchTea2.php",true);
    xmlhttp.send(formdata);
  }

参考链接：
php与ajax-菜鸟教程
ajax-菜鸟教程
提交formdata以及后端php如何处理
formData使用方法

监听回车和阻止刷新

点击提交表单后会发起异步请求，如何实现回车后也发起异步请求而是提交表单呢？回车后表单会自动提交，继而刷新页面，如何阻止刷新？

监听回车键

在提交表单时使用ajax异步请求，实现摁下回车键也可以阻止表单提交，转而点击提交按钮。

//监听回车事件
  document.onkeydown=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==13){
         document.getElementById("b1").click();
    }
    };

参考链接：
监听或阻止回车键

阻止回车后表单自动提交的三种方法:

1. 在form标签内加入onkeydown返回false的字段，阻止回车事件的发生：

<form method="get" id="myForm" onkeydown="if(event.keyCode==13){return false;}">

2. 在form标签内加入onsubmti返回false的字段，阻止表单提交事件发生:

<form name="keywordForm" method="post" action="" οnsubmit="return false;"> 

3. 让表单内多于一个文本框，将多余的文本框隐藏：

<input id="hiddenText" type="text" style="display:none" />  

使用回调函数

由于网站上存在多个 AJAX 任务，于是为创建 XMLHttpRequest 对象编写一个标准的函数，并让每个 AJAX 任务调用该函数。