ajax与php总结

ajax本人搞了一种原生写法，一种jq写法（ps:来自本人的实体网站）

（1）jquery写法

  			  <form class="formstyle" id="formstyle" method="post" name="formName">
  			  <input type="text" name="name"  placeholder="请输入你的姓名"/>
  			  <input type="text" name="number"  placeholder="请输入你的学号"/>
  			  <input type="text" name="email"  placeholder="请输入你的邮箱"/>
  			  <textarea type="text" name="why" placeholder="请输入加入gis小组的理由"></textarea>
  			  <input type="button" style="background:url(images/ok.jpg)" id="submitBtn"/>
          		</form>
        		  <span id="tishi"></span>

这是form表单

        <script type="text/javascript">
          $(function(){
            $("#submitBtn").click(function(){
              var params=$('input，textaera').serialize();//得到input和textarea中的值，本人就在这里出现错误
              var url="join.php";//需要执行的后台文件

              $.ajax({
                type:"POST",   //方法
                url: url,      //文件路径
                dataType:"json",//用的是什么字符，json字符在js中相当有优势
                data:params,//要传送的数据
                async:true,//是否同步或者异步
                success:function(msg){//查错
                  // alert(msg);
                  // document.write(msg);
                  // var tishi="你提交的姓名为"+msg.name;
                  //$("#tishi").html(tishi);
                },
                error: function () {
                alert("ajax有错！");
              }
              });
            });
          });
        </script>

这是后台文件

include('connect.php');
$name=$_POST["name"];
//echo $name;
$number=$_POST["number"];
//echo $number;
$email=$_POST["email"];
//echo $email;
$reason=$_POST["why"];
//echo $reason;
$flag=0;
$sql="insert into apply(ApplyName,ApplyNumber,ApplyReason,ApplyEmail,TandF)value('$name','$number','$reason','$email','$flag')";
$result=mysqli_query($mysqli,$sql);

（2）js原生写法

   <div class="date">
        <div style="width:970px; margin:10px auto;"><!----> 
            <input class="laydate-icon" id="laydate-icon" name="laydate-icon" onClick="laydate()" /><br><br><br>
            <input type="button"  value="确定" onClick="show()">   </br>
        </div>
    </div>
<p>
<div id="searchresult"></div>
</p>
<script>
;!function(){
laydate({
   elem: '#demo'
})
}();

    
    var xmlHttp;
    function show(){
        var str = document.getElementById('laydate-icon').value;/从表单中获得这个空的参数，因为我的这个日期的控件和onclick还有onchange冲突
        xmlHttp=GetXmlHttpObject();//创建一个xmlhttp对象
        if(xmlHttp==null){
            alert("borwser does not support http request");
            return;
        }
        //alert(str);
        var url="getinformation.php";//后台执行文件
        url=url+"?laydate-icon="+str+"&ra=";//从表单获取的数据
        url=url+Math.random();//在尾部夹一个随机数，以免缓存冲突
        xmlHttp.onreadystatechange=stateChange;//<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">readyState 改变时，就会触发 onreadystatechange 事件</span>
        xmlHttp.open("GET",url,true);//向后台传递参数
        xmlHttp.send();
    }
    function stateChange(){
        if(xmlHttp.readyState==4||xmlHttp.readyState=="complete"){//404代表错误200表示成功
            //alert(xmlHttp.responseText);
            document.getElementById("searchresult").innerHTML=xmlHttp.responseText;//从后台获取的数据在searchreault中显示出来
        }
    }
    function GetXmlHttpObject(){//在不同的浏览器中创建不同的xmlhttp对象
        var xmlHttp=null;
        try{
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            try{
                xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
            }
            catch(e){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
</script>

以上就是js和jquery的两种写法

下面总结下以下几个关键词，在w3c上也有

readyState：

表示XMLHttpRequest对象的状态：0：未初始化。对象已创建，未调用open；

1：open方法成功调用，但Sendf方法未调用；

2：send方法已经调用，尚未开始接受数据；

3：正在接受数据。Http响应头信息已经接受，但尚未接收完成；

4：完成，即响应数据接受完成。

Onreadystatechange：

请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。

responseText：

服务器响应的文本内容

responseXML：

服务器响应的XML内容对应的DOM对象

Status：

服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。

statusText：

服务器返回状态的文本信息。

Open（

string method,string url,boolean asynch,

String username,string password

）：

指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；

Method:表示http请求方法，一般使用"GET","POST".

url：表示请求的服务器的地址；

asynch：表示是否采用异步方法，true为异步，false为同步；

后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。

Send(content)：

向服务器发出请求，如果采用异步方式，该方法会立即返回。

content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。

SetRequestHeader(String header,String Value)：

设置HTTP请求中的指定头部header的值为value.

此方法需在open方法以后调用，一般在post方式中使用。

getAllResponseHeaders()：

返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。

返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！

getResponseHeader(String header)：

返回HTTP响应头中指定的键名header对应的值

Abort()：

停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。