Ajax技术介绍与使用

最新推荐文章于 2024-11-01 06:10:33 发布

WihauShe

最新推荐文章于 2024-11-01 06:10:33 发布

阅读量150

点赞数

分类专栏： Web 文章标签： ajax 核心对象使用

本文链接：https://blog.csdn.net/qq_39376697/article/details/105496152

版权

Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

介绍

<!--
    ajax 无刷新技术
    不刷新，部分刷新
    1.页面触发,请求由页面发起,ajax由js代码实现
    2.ajax也是符合http请求
    3.XMLHttpRequest  ajax请求的核心对象 存在浏览器兼容性 IE7开始支持这个对象
      IE6 要使用 new ActiveXObject("Microsoft.XMLHTTP")
    4.ajax请求是不刷新页面的，请求是一次性的，不能使用转发或者重定向
      第一种直接请求业务，不返回任何东西到页面
      第二种请求业务得到结果数据，后台一定要使用response.getWrite().print()获取数据
      第三种请求业务得到文件，音频，视频等等，后台要使用response.getOutputStream()
    5.ajax的同步和异步 ajax默认是异步 true ajax请求相当于开了一多线程
      同步 false ajax就不是多线程，会顺序运行
    6.后台传递到前台不能传递对象只能传递字符串，如果要实现java和js中对象的互相转换
      要使用json

-->

<html>
  <head>
    <title>Title</title>
    <script language="JavaScript">
      function getName(){
        //作ajax请求
        //浏览器的兼容性
        //1.获取XMLHttpRequest对象
        var xmlHttp;
        if (window.XMLHttpRequest){
          //如果存在 那浏览器是IE7以上
          xmlHttp = new XMLHttpRequest();
        }else{
          //如果不存在，IE6
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //请求
        //2.准备请求的参数
        //open方法 三个参数
        //第一个参数请求的方法类型
        //第二个参数请求的地址
        //第三个参数请求是同步还是异步 默认是true
        xmlHttp.open("get","MyServlet",true);

        //扩展 ajax的回调函数
        xmlHttp.onreadystatechange = function(){
          // if(xmlHttp.readyState == 1){
          //   console.log("1、服务器连接已经建立");
          // }
          // if(xmlHttp.readyState == 2){
          //   console.log("2、请求已接受");
          // }
          // if(xmlHttp.readyState == 3){
          //   console.log("3、请求处理中");
          // }
          if(xmlHttp.readyState == 4 && xmlHttp.status==200){
            console.log("后台返回 回调函数");
            console.log("4、请求已相应");
            var data = xmlHttp.responseText;
            console.log(data);
          }

        };

        //3.发送请求
        xmlHttp.send();
        //4.获取请求的结果 responseText请求结果
        var data = xmlHttp.responseText;
        console.log("请求结束");
      }

    </script>

  </head>
  <body>
  <a href="MyServlet">获取数据</a>
  <form action="MyServlet">

    <input type="submit" value="获取数据">
  </form>

  <input type="button" value="触发" onclick="getName()">

  </body>
</html>

使用

$(function(){
    $("#btn").click(function(){
        //get请求
        //post请求 和get请求一模一样
        //第一个参数是请求地址
        //第二个参数是请求的参数 js对象
        var obj = {name:"xiaowang","sex":"男"};
        // $.post("MyServlet",obj,function(data){
        //     alert(data);
        // });
        //通用的请求
        //$.ajax();
        //参数是一个对象
        $.ajax({
            //请求的地址
            url:"MyServlet",
            //请求的方法类型
            method:"get",
            //同步或者异步请求 默认是true异步请求
            async:true,
            //请求到后台的参数
            //1.指定对象
            //2.拼接地址栏
            //data:obj,
            data:"name=xiaowang&sex=男",
            //返回类型 默认是文本
            dataType:"text",
            //请求成功回调函数
            success:function(data){
                alert(data);
            }
        });


    });
});