原生ajax实现http请求

  1⃣️先简单了解一下HTTP协议：

　　　　http是计算机通过网络进行通信的一种规则，它是一种无状态协议(不建立持久链接，直白点儿说就是请求响应完事儿之后，链接就断开)　　　

　

　  2⃣️一个完整的http请求有七个步骤
　　　　  1.建立TCP(传输控制协议)链接
　　　　2.web浏览器向web服务器发送请求命令
　　　　3.web浏览器向web服务器发送请求头信息
　　　　4.web服务器应答
　　　　5.web服务器发送应答头
　　　　6.web服务器向浏览器发送数据
　　　　7.web服务器关闭TCP链接

　  3⃣️http请求由四部分组成
　　　　 1.请求方式 get/post
　　　　(get一般用于信息的查询和获取，参数是写到url里面的，有字数限制, post一般用于服务器上信息的增删改。。发送的数据是嵌到请求体里的)

　　　　　　　与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

　　　　　　　然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　　　　2.请求地址url
　　　　3.请求头(主要包含客户端的环境信息，身份验证等等)
　　　　4.请求体(请求正文，包含客户提交的查询字符串信息、表单信息)

　　 4⃣️HTTP响应包含三部分内容
             1.状态码request.status(由数字和文字组成)，用来显示请求成功或者失败
                  http响应 里面的状态码(由三位数字组成)有一下几种类型
                      1XX 是信息类，表示收到浏览器的请求，正在进一步处理
                      2XX 表示成功 例如 200 OK
                      3XX 重定向，表示请求没成功，客户需要进一步操作
                      4XX 客服端错误 表示客户端提交的请求有误， 例如 404 not found 在服务器端并没有找到相应的处理(动态、静态文件)
                      5XX 服务器错误，表示服务器不能完成对请求的处理(报错500)
              2.响应头(包含服务器类型、日期时间，响应内容的长短及类型等)
            3.响应体(也就是返回给客服端的数据信息)　

　　　　　　　　服务器返回数据的两种形式

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

　　　　　　　　responseText

ele.innerHTML=xhr.responseText;

　　　　　　　　responseXML

xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("xxx");
for (i=0;i<x.length;i++)
{
  txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("xxxx").innerHTML=txt;

     5⃣️ajax异步请求的过程

　　ajax简介

　　　　AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　　　　AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

　　　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

　　　　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　　　　　　　　　

            ajax 工作原理

　　　

　　　　ajax异步请求的过程

　　　　　　1.实例化一个XMLHttpRequest对象(xhr对象用于和服务器交换数据)　　　　

　　　　　　　　XMLHttpRequest 对象的三个重要的属性：

　　　　　　

　　　　　　　　　所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

　　　　　　　　　　　创建语法 var xhr=new XMLHttpRequest();

　　　　　　　　　老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

　　　　　　　　　　　创建语法 var xhr=new ActiveXObject("Microsoft.XMLHTTP");

　　　　　　　　　如果需要兼容老版本浏览器的话，实际应用中可以这样写

var xhr;
if (window.XMLHttpRequest){
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xhr=new XMLHttpRequest();
}else{
  // IE6, IE5 浏览器执行代码
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

　　　　2.调用open方法

　　　　　　　xhr.open(method,url,true);

　　　　　　　method 有get 和post两种方式

　　　get实栗(参数要拼接到请求的链接后面)

xhr.open("GET","url?t=" + Math.random(),async);
xhr.send(null);

　　　post实栗(需要设置请求头，写到open和send中间,参数写道send()里)

　　　　

xhr.open("POST","url",async);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8”)
xhr.send("parma1=val1$parma2=val2");        

　　　　3.调用send方法

　　　　　　

　　　　　　当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

　　　　　　通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

xhr.onreadystatechange=function(){
    if(xhr.status==200) {
        if (xhr.readyState==4) {
              ele.innerHTML=xhr.responseText;
          }
    }
}
xhr.open("GET","url",true);
xhr.send();

　　　　如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
　　　　不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
　　　　此时，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

xhr.open("GET",url,false);
xhr.send();
ele.innerHTML=ele.responseText;

4.对readystate进行监听
               readystate
                   =0 UNSENT (未打开) open()方法还未被调用
                   =1 OPENED (未发送) send()方法还未被调用
                   =2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回
                   =3 LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据
                   =4 DONE (请求完成) 整个请求过程已经完毕

　　　　　　　　当请求被发送到服务器时，我们需要执行一些基于响应的任务。
　　　　　　　　每当 readyState 改变时，就会触发 onreadystatechange 事件。
　　　　　　　　readyState 属性存有 XMLHttpRequest 的状态信息。

xhr.onreadystatechange=function(){
    if(xhr.status==200) {
        if (xhr.readyState==4) {
              ele.innerHTML=xhr.responseText;
          }
    }
}

如果有多个ajax任务，我们可以这样做：

封装ajax请求代码

function loadContent(url,fn){
　　if (window.XMLHttpRequest){

　　　　// IE7+, Firefox, Chrome, Opera, Safari 代码
　　　　xhr = new XMLHttpRequest();
　　}else{

　　　　// IE6, IE5 代码
　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

　　｝

　　xhr.open("GET",url,true);
　　xhr.send();
　　xhr.onreadystatechange=fn;
}

具体事件(比如说某元素的点击事件触发ajax请求)
Btn.onclick =  function(){
　　loadContent(url,function(){
　　　　if(xhr.status == 200) {
　　　　　　if(xhr.readyState == 4) {
　　　　　　　　ele.innerHTML = xhr.responseText;
　　　　　　}
　　　　}
　　})
}

 综合实栗

当用户在输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) //4描述一种"已加载"状态；此时，响应已经被完全接收。 //200表示成功收到
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","path／xx/xx.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

后台(PHP)代码

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0){
  $hint="";
  for($i=0; $i<count($a); $i++) {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
      if ($hint=="") {
        $hint=$a[$i];
      } else {
        $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == ""){
  $response="no suggestion";
}else{
  $response=$hint;
}

//output the response
echo $response;
?>

希望我整理的内容(个人理解＋部分copy)可以帮到大家，如果有什么不足的地方还望大家批评指正，再此先谢过了！！！