美文网首页
快速上手ajax

快速上手ajax

作者: 我爱铲屎 | 来源:发表于2019-07-12 21:51 被阅读0次

AJAX简介

AJAX(Asynchronous JavaScript And XML)是异步的JavaScript和XML;是一种用于快速创建动态网页的技术;通过在后台与服务器进行少量的数据交换,使网页实现异步更新。
使用AJAX最主要可以做以下的事情:
● 在不重新加载页面的情况下发送请求给服务器。
● 接受并使用服务器发来的数据。

AJAX发送HTTP请求

为了使用JavaScript向服务器发送一个http请求,你需要一个包含必要函数功能的对象实例,即XMLHttpRequest对象,在一些较早版本的IE浏览器中使用的是ActiveXObject对象。

创建XMLHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。


var XHR;

if (window.XMLHttpRequest){

    //所有现代浏览器(IE7+、Firefox、Chrome、

    //Safari 以及 Opera)均内建 XMLHttpRequest 对象。

    XHR = new XMLHttpRequest();

} else if(window.ActiveXObject){

    //老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

    XHR = new ActiveXObject("Microsoft.XMLHTTP");

}

向服务器发送请求

在创建HTTP对象后要发送一个实际的请求,通过调用我们使用 XMLHttpRequest 对象的 open() 和 send() 方法,像下面这样:

XHR.open("GET","/ajax/get",true);

XHR.send();
open(method,url,async)方法

规定请求的类型、URL 以及是否异步处理请求。
● open()方法的第一个参数是请求的方法,有GET,POST等服务器支持的方法。
● open()方法的第二个参数是你要发送的URL
● open()方法的第二个参数是可选的,用于设置请求是否是异步的。如果是异步设为 true (默认设置)。

send(string)方法

将请求发送到服务器。
● 方法的参数可以是任何你想发送给服务器的内容

处理服务器的响应

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

onreadystatechange 事件

改事件在readyState发生改变时,就会被触发。readyState属性存有XMLHttpRequest的状态信息,从0到4变化。
● 0:请求未初始化
● 1:服务器已建立连接
● 2:请求已接收
● 3:请求处理中
● 4:请求完成,准备就绪
注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。

status属性

我们通过检查响应码来区别对待成功和不成功的AJAX调用。
● 200: "OK"
● 404: 未找到页面

 XHR.onreadystatechange = function () {
     if(this.readyState == 4 && this.status == 200){

          //请求完成且请求成功
          //Do Something
          
      }else{
            
          //请求发生错误
          //Do Otherthing
      }
    
 }
responseText / responseXML 属性

如需获得来自服务器的响应,可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
● responseText:获得字符串形式的响应数据。
● responseXML:以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理。

一个简单的AJAX实例

如下图示通过点击"修改内容"的按钮,将“使用 AJAX 修改该文本内容”修改为从服务端获取的字符串。


38cc0eb46931fc68cd77091789e95b8.png
前端代码

ajax.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX学习</title>
    <script type="text/javascript">
        function changeDoc() {
            var XHR = (window.XMLHttpRequest)?
                      new XMLHttpRequest():
                      new ActiveXObject("Microsoft.XMLHTTP");
            XHR.open("GET","/ajax/get",true);
            XHR.send();
            XHR.onreadystatechange = function () {
                if(this.readyState !== 4 || this.status !== 200)return;
                document.getElementById("myDiv").innerHTML = this.responseText;
            }
        }

    </script>
</head>
<body>
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick=changeDoc()">修改内容</button>
</body>

</html>
服务端代码
@Controller
@RequestMapping("ajax")
public class AjaxController {
    //访问到ajax.html页面
    @GetMapping("/ajax")
    public String ajax(){
        return "ajax";
    }

    //点击按钮通过ajax请求到'/ajax/get'路径
    //将str返回给ajax.html页面
    @GetMapping("/get")
    @ResponseBody
    public void get(HttpServletResponse response) throws IOException{
        String str = "在不重新加载页面的情况下发送请求给服务器.接受并使用从服务器发来的数据。";
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(str);
    }
}

运行结果:


de47e112bc535fbc50b310f9f8f40ee.png

相关文章

  • 快速上手ajax

    AJAX简介 AJAX(Asynchronous JavaScript And XML)是异步的JavaScrip...

  • # Ajax

    Ajax 一、什么是Ajax AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动...

  • Day02(创建Ajax,跨域Jsonp,数据库,demo lo

    Ajax 什么是Ajax AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网...

  • Masonry介绍与使用实践:快速上手Autolayout

    Masonry介绍与使用实践:快速上手Autolayout Masonry介绍与使用实践:快速上手Autolayout

  • ajax实践

    ajax 是什么?有什么作用? AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速...

  • 浅谈AJAX

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页...

  • Ajax get请求GitHub API接口

    AJAX用于异步请求。AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页...

  • 什么是 AJAX ?

    一.什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网...

  • Spring Boot-web开发详解

    之前有一篇文章介绍了如何快速上手Spring Boot:如何快速上手Spring Boot?,方便大家快速入门、了...

  • Ajax

    什么是Ajax? Ajax= 异步 JavaScript 和 XML。Ajax 是一种用于创建快速动态网页的技术。...

网友评论

      本文标题:快速上手ajax

      本文链接:https://www.haomeiwen.com/subject/euzzhctx.html