AJAX

最新推荐文章于 2024-08-08 11:16:24 发布

Y734493585

最新推荐文章于 2024-08-08 11:16:24 发布

阅读量216

点赞数

分类专栏： JAVAWeb

本文链接：https://blog.csdn.net/Y734493585/article/details/98040369

版权

JAVAWeb 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、产生背景：

普通javascript每次刷新都是整体刷新，速度慢，交互性差，所以引入AJAX,AJAX等于异步javascript+xml，它的优点为可以局部刷新，异步交互（提交数据后不用等待值返回）。减小服务器压力，提高用户体验

二、AJAX局部刷新原理

在这里插入图片描述

三、ajax核心知识

1.XMLHttpRequest对象创建：

<script type="text/javascript">
    function getName() {
        var  xmlHttpRequest;
        //先判断浏览器是否支持XMLHttpRequest对象
        if(window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
        }else {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");        }
        }
</script>

2. XMLHttpRequest对象请求后台

两个方法：

xmlHttpRequest.open（参数1，参数2，参数3）
参数1 ：提交方式（post/get）
参数2 ：url地址
参数3 ：是否异步刷新（true/false）----一般用true;
xmlHttpRequest.send();

请求实例：（注：参数以后一般不这么传递，而是用json）

//例子1：利用get请求且携带参数
xmlHttpRequest.open("post", "ajax?name=袁欢&age=22", true);
xmlHttpRequest.send();
//例子二：利用post请求且携带参数（模拟表单提交）
xmlHttpRequest.open("post", "ajax", true);
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("name=袁欢&age=22");

XMLHttpRequest对象响应服务器

相关知识：
1. XMLHttpRequest的五种状态
2. readyState属性中存有XMLHttpRequest的状态信息。
3. onreadystatechange事件：当readyState发生改变时，就会调用onreadystatechange函数。
4. 获取服务器数据：（当readyState=4&&status=200时，再接收）
  1. XMLHttpRequest对象的responseText属性获取字符串信息
  2. XMLHttpRequest对象的responseXML属性获取XML形式数据（了解）

接收服务器数据实例：

  xmlHttpRequest.onreadystatechange = function () {
     if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
           alert(xmlHttpRequest.responseText);
       }
   };