Ajax 简明教程

最新推荐文章于 2024-08-01 15:05:06 发布

FARO_Z

最新推荐文章于 2024-08-01 15:05:06 发布

阅读量96

点赞数

分类专栏： JavaEE 文章标签： ajax java js

本文链接：https://blog.csdn.net/weixin_44062380/article/details/116855523

版权

JavaEE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax

用来实现异步

所谓异步，我们举个例子，我在这边看电视，手上也在写作业，等作业写完了，电视节目也播完了。我写作业的过程，并没有打扰我去看电视，这就是异步的过程

Ajax 使用例

js:

function  test() {
        //发送异步请求
       //1.创建XMLHttpRequest对象
      var xmlhttp;
      if(window.XMLHttpRequest){
        //非IE
        xmlhttp=new XMLHttpRequest();
      }else if(window.ActiveXObject) {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
       //2.打开链接
      var uname= document.getElementById("uname").value;
      //xmlhttp.open("get","/testuname?username="+uname,true);
       xmlhttp.open("post","/testuname",true);
       //3.指定回调函数
      xmlhttp.onreadystatechange=function(){
        //3.1 判断状态   4  表示成功（200）
        if(xmlhttp.readyState==4){
          //3.2 接收返回的数据
          var responseText = xmlhttp.responseText;
          document.getElementById("rs").innerText=responseText;
        }
      }
       //4.发送数据
       //xmlhttp.send();
       //post
       xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
       xmlhttp.send("username="+uname);
     }

html:

页面实现的效果，是当鼠标移出输入框后，向后端发送 ajax 请求，并返回是否符合要求

<body>
  <h1>index.jsp</h1>
  username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
</body>

传统过程和 Ajax方式的区别

传统：

Ajax:

其实，Ajax和多线程有点类似。如果一个用户的请求没有完成，他可以在出结果前，去执行其他的操作，因为结果是异步传输给用户的，用户在同时做其他事情，也就不会有使用的卡顿感

XMLHttpRequest对象常用属性和方法

XMLHttpRequest 是我们的常用对象，要对其进行了解

———— 属性————

1、onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置:

我们一般在这个属性里，写回调函数

xmlHttp.onreadystatechange = function() { //我们需要在这写一些代码}

2、readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性可能的值:

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据):

 xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
		//从服务器的response获得数据 }
}

3、responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText:

 xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

4、其他属性

使用的不会很多

———— 方法————

1、open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

 xmlHttp.open("GET","test.php",true);

2、send() 方法

xmlHttp.send(null);

3、其他方法

JQuery操作Ajax

之前介绍的，都是传统方式操作Ajax

下面，我们介绍 JQuery 操作Ajax的方式

我们将我们之前，验证用户是否可用的代码，用新的方式重写

$.ajax({
  url:"/testuname",
  data:"username="+uname,
  type:"post",
  dataType:"text",
  success:function(rs){
    $("#rs").html(rs);
  }
});

当然，也要简略写法：

$.post(url,data,function(result) { 
   //省略将服务器返回的数据显示到⻚面的代码
});

Ajax 中使用 JSON

现在流行的数据传输方式，都是JSON了，听说，还有老人，在使用 xml 格式进行数据传输，太可怕了…

JSON 格式定义

 
var 变量名 = { 
  “key” : value ,   // number类型
  “key2” : “value” , 	// 字符串
  “key3” : [] , 	// 数组
  “key4” : {}, 	// 对象
  “key5” : [{},{}] 	// 对象数组
};

前端使用 JSON

使用：

前端获得 JSON格式的内容，直接使用就可以了

向后端传输：

let data = {
	"name" : "xxx",
	"age"  : 20
}
$.ajax({
    url: 'localhost:8080/api/xxxxx',
    dataType: 'json',
    type: 'post',
    data: JSON.stringify(data),
    contentType: 'application/json;charset=utf-8',
    success: function (resp) {
        console.log(resp);
    }
});

需要注意的两点：

data参数需要使用JSON.stringify()方法序列化成JSON字符串
contentType需要显示指定为’application/json;charset=utf-8’，这样浏览器才会把需要传输的data认为时JSON字符串传输，否则浏览器还是会将其作为Form Data传输，这样后端接收到的参数会出现反序列化错误。

后端使用 JSON

分成 JSON 的生成，和解析

这里，我们使用 FastJson

FastJson Maven：

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.75</version>
            </dependency>

具体的使用方式，可以看我之前写的 JSON 相关的博客

我们只要知道， Servlet 将JSON字符串传给前端的方式，是使用 HttpServletResponse.Writer.out就行了

如果我们乐意，可以封装一个返回，然后返回一个通用返回值，里面包含：

**boolen success：**信息是否正确

**String message：**如果返回错误，所包含的错误信息

**T Content：**返回的信息（可以是任意类型）

然后，将这个通用返回值，转换为JSON格式，发送到后端

FARO_Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ajax 简明教程

Ajax用来实现异步所谓异步，我们举个例子，我在这边看电视，手上也在写作业，等作业写完了，电视节目也播完了。我写作业的过程，并没有打扰我去看电视，这就是异步的过程Ajax 使用例js:function test() { //发送异步请求 //1.创建XMLHttpRequest对象 var xmlhttp; if(window.XMLHttpRequest){ //非IE xmlhttp=new XMLHttp
复制链接

扫一扫