ajax——提交form表单

ajax（Asynchronous JavaScript and Xml）：是前后端的通信技术，不是一门新的语言。实现的功能为局部刷新，传输数据格式只能为字符串

使用ajax的大致步骤如下：

  1.首先解决兼容问题

  2.绑定事件监听函数

  3.连接服务器

  4.发送消息请求

首先写好html部分

账号：<input type = "text" id = "uname"><span id = "hint"></span>
</br>
成绩：<input type="text">

根据html代码写一个简单的php服务

<?php
 $db = ["tom","mary","jack"];
 $uname = $_REQUEST['uname'];
 $bool = false;
 foreach($db as $n){
    if($n === $uname){
      $bool = true;
      break;
     }
 }
 if($bool){
  echo "1";
 }else{
   echo "0";
}
?>

表单的提交方式有两种，分别为get和post

先看看第一种GET请求

var xhr = null;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest()  //其他浏览器
}else{
  xhr = new ActiveXObject("Microsoft.XMLHTTP") //老版本的IE及以下
}
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){ //表示消息接受完成
     if(xhr.status === 200){  //是否为成功的响应
       console.log(xhr.responseText);
       tsxx(xhr.responseText)
     }else{
       console.log('接收到一个非成功的ajax响应' + xhr.status);
}
}
}
xhr.open("GET","03.php?uname="+unameval,true);
xhr.send(null);  

下面为POST请求

 在GET请求的第三步做修改，发送请求之前要设置请求头

xhr.setRequestHeader("Content-type","application/json; charset=utf-8"); //json
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8"); //表单数据
xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8"); //纯文本
xhr.setRequestHeader("Content-type", "text/html; charset=utf-8"); //HTML

   所以根据下面写的HTMLpost请求如下

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('stuName=' + uname + '&score=' + score)

GET和POST请求使用的场合：

  GET:请求是为了查找资源，HTML表单数据仅用来帮助搜索；请求结果无持续副作用；收集的数据及HTML表单内的输入字段名总长不超过1024个字符

 POST：请求结果有持续的副作用，如在数据库添加新数据；要传送的数据不是采用7位的ASCII编码；表单收集的数据过长