ajax

最新推荐文章于 2021-08-06 04:38:50 发布
最新推荐文章于 2021-08-06 04:38:50 发布
阅读量168 收藏
点赞数
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/106531324
版权

一.ajax的概念

//A
      //阻塞 非阻塞  同步 异步
      //同步：
      //异步：
      //J
      //X

      //优势：局部刷新
      /* 
    <person>
        <name>huliangliang</name>
        <age>20</age>
    </person>
    {name:"hliangliange",age:20}
     */

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。
通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。
Ajax最大的特点就是局部刷新。
Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)
创建Ajax对象
    new XMLHttpRequest(); 
    new ActiveXObject('Microsoft.XMLHTTP')     //IE6

open()
xhr.open('get', 'demo.php', true); //对于 demo.php 的 get 请求，false 同步
三个参数： 要发送的请求类型   (get 、post)、请求的 URL 和表示是否异步
Post：xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data);
发送请求      send()      
接收服务器返回的信息        onreadystatechange
readyState
0  请求未初始化	1 服务器连接己建立
2  请求已接收	3 处理请求，响应中
4  响应就绪

status         HTTP 状态码
常见状态码
200 - 请求成功
301 -Moved Permanently 资源（网页等）被永久转移到其它URL
304 -Not Modified 使用缓存文档
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
状态码分类
1**信息，服务器收到请求，需要请求者继续执行操作	2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求	4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误

二.ajax的使用

<script>
      //1.创建ajax实例
      /* var xhr = new XMLHttpRequest();
      var xhr = new ActiveXObject("Microsoft.XMLHTTP"); */
      //兼容性
      if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
      } else {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2.准备工作 请求数据  接口url 请求类型type

      xhr.open("get", "data.json", true);

      //3.发送请求
      xhr.send();
      //4.取响应数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            //数据过来之后，如何处理，是根据需要来定，可能需要1行代码实现，也可能很多很多行代码实现
            console.log(xhr.responseText);
          } else {
            console.log("加载失败，请重试");
          }
        }
      };
    </script>

三.封装ajax

<script>
      //只针对于get请求
      function ajax(url, fnSuccess, fnError) {
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("get", url);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              fnSuccess(data);
            } else {
              fnError();
            }
          }
        };
      }
    </script>

四.测试封装函数

data.json文件内容是[1,2,3]
ajax.js就是上面三的代码

<ul></ul>
    <script src="ajax.js"></script>
    <script>
      var oUl = document.querySelector("ul");
      ajax("data.json", foo, bar);
      //成功时的处理函数foo
      function foo(a) {
        a = JSON.parse(a);
        var str = "";
        for (var i = 0; i < a.length; i++) {
          str += `<li>${a[i]}</li>`;
        }
        oUl.innerHTML = str;
      }
      function bar() {
        alert("失败了");
      }
    </script>

五.post请求

<input type="text" name="username" />
    <input type="button" value="提交" />
    <script>
      var aInput = document.querySelectorAll("input");
      aInput[1].onclick = function () {
        //1.创建ajax实例
        /* var xhr = new XMLHttpRequest();
      var xhr = new ActiveXObject("Microsoft.XMLHTTP"); */
        //兼容性
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.准备工作 请求数据  接口url 请求类型type

        xhr.open("post", "05_test.php", true);
        xhr.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        );
        //3.发送请求
        xhr.send("username=" + aInput[0].value);
        //4.取响应数据
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              //数据过来之后，如何处理，是根据需要来定，可能需要1行代码实现，也可能很多很多行代码实现
              console.log(xhr.responseText);
            } else {
              console.log("加载失败，请重试");
            }
          }
        };
      };
    </script>

<?php
//echo "123";
$name = $_POST["username"];
echo "hello".$name;
?>

六.ajax完整封装

<script>
      //1.既能适应get请求也能适应post请求
      //2.既能处理不带数据的请求也能处理附加数据的请求
      /* 
    参数：type 请求方式 get/post 必传
        url 请求地址  必传
        data 附加的数据（向后台传递的数据）
        success 请求成功时的回调函数 必传
        error 请求失败时的回调函数
    */

      //向服务端发送get请求，如果需要附加数据，这个数据放到url后面 demo.php?username=aaa&password=111
      //向服务端发送post请求，如果需要附加数据，这个数据放到请求体里，具体体现在xhr.send('username=aaa&password=111');

      //{username:"aaa",password:1111}

      function ajax(type, url, data, success, error) {
        // 注意 无论是get还是post 都有相同部分代码
        if (window.XMLHttpRequest) {
          var xhr = new XMLHttpRequest();
        } else {
          var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //将{username:"aaa",password:111}变成username=aaa&password=111
        var str = "";
        for (var i in data) {
          str += i + "=" + data[i] + "&";
        }
        //将结尾的&替换成空字符
        str = str.replace(/&$/, "");

        //在不同的地方加判断
        if (type == "get") {
          xhr.open("get", url + "?" + str);
          xhr.send();
        }
        if ((type = "post")) {
          xhr.open("post", url);
          xhr.setRequestHeader(
            "Content-type",
            "application/x-www-form-urlencoded"
          );
          xhr.send(str);
        }

        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var data = xhr.responseText;
              success(data);
            } else {
              error();
            }
          }
        };
      }
    </script>

七.测试完整的ajax

<body>
    <script src="ajax01.js"></script>
    <script>
      ajax({
        url: "07_test.php",
        success: function (data) {
          console.log(data);
        },
        data: { username: "admin" },
        type: "get",
      });
    </script>
  </body>

<?php
$name = $_REQUEST["username"];
echo "111".$name;
//echo "111";
?>

function ajax(obj) {
  // 注意 无论是get还是post 都有相同部分代码
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //将{username:"aaa",password:111}变成username=aaa&password=111
  var str = "";
  for (var i in obj.data) {
    str += i + "=" + obj.data[i] + "&";
  }
  //将结尾的&替换成空字符
  str = str.replace(/&$/, "");

  //在不同的地方加判断
  //toLowerCase()将字母转小写toUpperCase()将字母转大写
  if (obj.type.toLowerCase() == "get") {
    if (str == "") {
      xhr.open("get", obj.url);
    } else {
      xhr.open("get", obj.url + "?" + str);
    }
    xhr.send();
  }
  if (obj.type.toLowerCase() == "post") {
    xhr.open("post", obj.url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(str);
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        obj.success(data);
      } else {
        if (obj.error) {
          obj.error();
        }
      }
    }
  };
}

八.回调函数

<script>
      //作为一个函数的参数进行传递，并在该函数内部通过指针（函数名）进行调用的函数，通常，调用是在某个条件满足时
      function foo(fn) {
        fn();
      }
      function bar() {}
      foo(bar);
</script>

九.事件委托

<style>
      li {
        background-color: red;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <input type="button" value="more" />
    
    <script src="ajax01.js"></script>
    <script>
      let oUl = document.querySelector("ul");
      let oBtn = document.querySelector("input");
      /* let aLi = document.querySelectorAll("li");
      for (let i = 0; i < aLi.length; i++) {
        aLi[i].onclick = function () {
          console.log("a");
        };
      } */

      oUl.onclick = function (e) {
        //console.log("a");
        var evt = e || event;
        var _target = evt.target || evt.srcElement;
        if (_target.tagName.toLowerCase() == "li") {
          console.log("a");
        }
      };
      oBtn.onclick = function () {
        ajax({
          type: "get",
          url: "09_data.json",
          success: function (data) {
            data = JSON.parse(data);
            data.forEach((item) => {
              let oLi = document.createElement("li");
              oLi.innerText = item;
              oUl.appendChild(oLi);
            });
          },
        });
      };
    </script>
咩有猫腻.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
ajax的复习以及它用在哪？
永不停歇
03-13 1524
1，ajax 1，ajax 是7种技术的综合，常用到的：html+css   javascript  XML(xmlHttpRequest对象)  xstl  2，ajax可以理解成就是javascript通过操作XML(XMLHttpRequest对象)来完成http请求的过程 什么时候适合使用ajax: (1) 频繁的对数据库（服务器）进行操作的时候 （2）无刷新页面请求（表
ajax用在那,AJAX在JQuery中的应用详解
weixin_35084134的博客
08-05 139
AJAX在jQuery中的应用1. $.ajax()方法$.ajax()方法是一个功能十分强悍的一个底层方法，基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法。1.1 $.ajax()中的参数及使用方法$.ajax()调用的语法格式为：$.ajax([options])其中，可选参数[options]作为$.ajax()方法中的请求设置，其格式为key/value，...
ajax常用在哪里,AJAX常用知识点及应用
weixin_42635064的博客
08-06 434
一、AJAX是什么？是用来做什么的？AJAX是Async JavaScript And XML(异步的JS和XML)的缩写，是JS通过异步的方式来获取响应并且局部更新页面。常用的请求方法：地址栏回车 //会替换当前页面![](./xxx) //只能请求特定类型 //只能请求特定类型 //只能请求特定类型 //会替换当前页面AJAX所带来的是...
Web前端面试指导(二十九)：Ajax 是什么? 如何创建一个Ajax？
雄领IT的专栏
10-06 6582
题目点评 Ajax 是在工作中是必用的技术，在面试中十有八九会问的，答题的思路最好先回答原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用Jquery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！ Ajax是什么 我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程
Ajax
猪猪神功屁
03-25 121
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax最大特点：可以实现局部刷新，再不更新整个页面的前提下维护数据，提升用户体验。 优化了浏览器和服务器之间的传输，减少不必要的数据往来，减少了宽带占用； Ajax引擎在客户端运行，承担了一部分本来有服务器承担的工作，减小了大...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax高级程序设计pdf
05-16
**Ajax高级程序设计** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验，尤其...
Ajax引擎
weixin_30782293的博客
05-04 137
前面讲过，Ajax引擎是由javascript编写的。 第一步：初始化XMLHttpRequest对象。 http_request = false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XM...
JQuery中的ajax请求
ksx2333的博客
06-18 855
1 jquery中的`$get`发送ajax请求 2 jquery中的`$post`发送ajax请求 3 jquery中的`$ajax`发送ajax请求
AJAX在jQuery中使用步骤
我的菜鸟之路
11-08 316
前天自己看了一下视频学了AJAX。感觉比较神奇，很喜欢这种异步刷新的功能。 下面把代码再熟悉一下，加深一下记忆。$(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", url: "http://127.0.0.1:8080/ajaxdemo/serv
Ajxa用在哪些方面(六)
weixin_30321709的博客
09-28 194
Ajax只有在适当的地方才会用到，也即需要在后台进行大量数据处理（充当消息通知机制），需要频繁的定时或不定时从服务器中读取数据的时候。1.比如我们常接触电子邮件系统中，因为电子邮件系统一般都由电子邮件服务器及客户端组成，当用户通过web登录电子邮件系统时，web服务器需要 从邮件服务器中收取邮件内容，这个邮件收取的过程有时会比较长，而且在用户阅读邮件的过程中不定时的还有有新邮件出现。在这些系统中使...
AJAX是谁？从哪里来？
北漂的IT小白菜
12-15 1484
什么是AJAX？ 使用XHTML和CSS的基于标准的标示技术 使用DOM进行动态显示和交互 使用XML和XSLT进行数据交换和处理 使用XMLHttpRequest进行异步数据检索 使用JavaScript将以上技术融合在一起 综述：从上面可以看出来AJAX其实是一个组合产物，他的内容都是老的技术，只不过是将他们有机的融合在一起罢了。   WEB开发和AJAX开发有什么区别？
同样是写代码，你和大神究竟差在哪里？
程序人生的博客
01-06 533
很多程序员都有这么一个梦想——自己写的代码，可以像诗一样优美；自己做的设计，能恰到好处，既不过度，也无不足。这种带有一点洁癖的完美主义就像一把达摩克利斯之剑，仿佛时刻在提醒着：不能将就、...
AJAX技术入门讲解
"AJAX技术入门.ppt - 传智播客的AJAX教程，涵盖了AJAX的基本概念、思维方式、核心技术、应用实例、优缺点以及开发工具。" 在讲解AJAX技术之前，首先需要理解它的全称：Asynchronous JavaScript and XML（异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值