Ajax （菜鸟教程）学习笔记

什么是AJAX

• AJAX 是一种用于创建快速动态网页的技术。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建对象

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

请求

https://www.cnblogs.com/logsharing/p/8448446.html GET POST 详细讲解

// method: GET POST
// url: 文件在服务器的位置
// async: 
//  true-异步(默认)： 请求发送后相当于开辟新的线程执行，浏览器可以去做其他事
//               互不影响，用户体验较好。
//  false(同步)： 请求发送后浏览器处于等待，得到请求数据后继续执行，类似单线程
xmlhttp.open(method, url, async);

// 在POST访问时发送的数据（str）
xmlhttp.send();

响应

// 返回XML格式数据
xmlhttp.responseXML;
// 返回字符串数据
xmlhttp.responseText;

onreadystatechange 事件

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

三个重要属性

服务器常用的状态码及其对应的含义如下：

• 200：服务器响应正常。
• 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
• 400：无法找到请求的资源。
• 401：访问资源的权限不够。
• 403：没有权限访问资源。
• 404：需要访问的资源不存在。
• 405：需要访问的资源被禁止。
• 407：访问的资源需要代理身份验证。
• 414：请求的URL太长。
• 500：服务器内部错误。

案例

function loadXMLDoc(value) {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange =function () {
       if (this.readyState === 4 && this.status === 200){
           var res = document.getElementById('res');
           console.log(xhttp.responseText);
           res.value = xhttp.responseText;
       }
   };
   xhttp.open("GET", "http://10.2.0.200:8080?value=" + value, true);
   xhttp.send();
}