Ajax基础-CSDN博客

本文链接：https://blog.csdn.net/ZJQ12334/article/details/107575283

Ajax含义:

1、Ajax的全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）他并不是新的编程语言，而是几种原有技术的结合体。

优点：

1、通过异步刷新，提升了用户体验。
2、优化浏览器和服务器之间的传输，减少不必要的数据返回，减少了带宽占用。
3、ajax引擎在客户端运行，承担了一部分由服务器承担的工作，从而减少大量用户下的服务器负载。

缺点：

1、不支持浏览器的回退按钮。
2、安全问题ajax暴露于服务器交互的细节。
3、对搜素引擎的支持比较弱。

如何使用ajax

完整实现按一个ajax的异步调用和局部刷新三步骤：
1、创建XMLHttpRequest对象，也就是创建一个异步调用对象 ---- 创建XMLHttpRequest
2、创建一个新的http请求，并执行该http请求的方法，url 地址 ---- 发送ajax请求
3、设置相应http请求状态变化的函数 ---- 处理服务器响应

在这里插入图片描述

创建ajax对象

document.getElementById('btnLoad').onclick=function(){
    //1.创建XMLHttpRequest对象
    var xmlhttp;
    if(window.XMLHttpRequest){
      //IE7+ firfox chrome opera safari
      xmlhttp = new XMLHttpRequest();
    } else {
      //ie6 ie5..
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log(xmlhttp);

发送ajax请求
1、创建请求：xmlhttp.open(‘GET’,“URL地址”,true);
2、发送到服务器xmlhttp.send();

//2.发送ajax请求
    xmlhttp.open("GET","http://192.168.10.40:8080/content",true);
    xmlhttp.send();

处理服务器相应

1、xmlHttp.onreadystatechange()事件用于监听Ajax执行过程
2、 xmlHttp.readystate属性说明的是XMLHttpRequest当前的状态
① Readystate =0 – 请求未初始化
② Readystate =1 – 服务器连接已经建立
③ Readystate =2 – 请求已经被接收
④ Readystate =3 – 请求正在处理
⑤ Readystate =4 – 响应文本已被接收
3、xmlHttp.status属性服务器响应的状态码，200:成功 404:未找到。。。

//3.处理服务器响应
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState==4 && xmlhttp.status==200){
        var t = xmlhttp.responseText;
        document.getElementById('divContent').innerHTML=t;
      }
    }

利用Ajax实现新闻列表展现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新闻列表</title>
</head>
<body>
  <div id="container"></div>
</body>
<script type="text/javascript">
  //1.创建XMLHttpRequest对象
    var xmlhttp;
    if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log(xmlhttp);
    //2.发送ajax请求
    xmlhttp.open("GET","http://192.168.10.40:8080/news_list",true);
    xmlhttp.send();
    //3.处理服务器响应
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState==4 && xmlhttp.status==200){
        var t = xmlhttp.responseText;
        console.log(typeof t);//string
        var json = JSON.parse(t);
        console.log(json);
        var html = "";
        for(var i=0;i<json.length;i++){
          var news = json[i];
          html=html+"<h1>"+news.titile+"</h1>";
          html=html+"<h2>"+news.date+"&nbsp;"+news.source+"</h2>";
          html=html+"<hr/>"
        }
        document.getElementById("container").innerHTML=html;
        // document.getElementById('divContent').innerHTML=t;
      }
    }
</script>
</html>