AJAX介绍

最新推荐文章于 2024-07-12 20:03:50 发布

jacoputh

最新推荐文章于 2024-07-12 20:03:50 发布

阅读量219

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/m0_59717047/article/details/121161480

版权

AJAX

一.AJAX
二.Ajax编程步骤
三.jquery的ajax操作
四.JSON

一.AJAX

1.1 Ajax简介

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下

异步同步的概念
同步：就是有顺序的进行，用户先给服务器发送请求，服务器去接收，再调用方法再反馈
异步：没有顺序，不用排队，通过AJAX交互方式
普通的交互方式
Ajax异步交换方式

1.2 Ajax所包含的技术

1.使⽤CSS和XHTML来表示。
2.使⽤DOM模型来交互和动态显示。
3.使⽤XMLHttpRequest来和服务器进⾏异步通信。
4.使⽤javascript来绑定和调⽤。

AJAX 的核⼼是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。
IE 浏览器使⽤ ActiveXObject，⽽其他的浏览器使⽤名为 XMLHttpRequest 的 JavaScript 内建对象

1.3 XMLHttpRequest常⽤属性

1.onreadystatechange 属性

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

这个方法就是做回调反馈使用的

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

 //指定回调函数  function里的方法是在匿名内部类里的，其实是在你想send之后收到结果之后才会运行。但是需要你在send之前规定好
      xmlhttp.onreadystatechange=function(){
        //3.1 判断状态
        if(xmlhttp.readyState==4){ //200 表示有传输数据
          //3.2 接收返回的数据
          var responseText = xmlhttp.responseText;
          document.getElementById("rs").innerText=responseText;

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

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

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

示例参考上面

responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
就是说取值反馈给用户用的

在我们的代码中，我们将把时间⽂本框的值设置为等于 responseText：

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

示例参考上文
在这里插入图片描述

1.4 XMLHttpRequest⽅法

open() ⽅法
open() 有三个参数。第⼀个参数定义发送请求所使⽤的⽅法，第⼆个参数规定服务器端脚本的URL，第三个参数（true）规定应当对请求进⾏异步地处理。

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

send() ⽅法
send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录，那么代码是这样的：

xmlHttp.send(null);

二.Ajax编程步骤

创建XMLHttpRequest对象。
设置请求⽅式。
调⽤回调函数。
发送请求。

创建XMLHttpRequest对象
优先判断是否为IE浏览器

//第⼀步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//⾮IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

设置请求⽅式
XMLHttpRequest对象的open()⽅法就是来设置请求⽅式的

Post和Get方法有所不同相对post安全系度高，向服务器发送⼤量数据（POST 没有数据量限制）
发送包含未知字符的⽤户输⼊时，POST ⽐ GET 更稳定也更可靠
但是写法不一样
可以参考篇文章

post和get的不同写法

xmlHttp.open("POST", url, true);

在这里插入图片描述

调⽤回调函数

//第三步：注册回调函数
xmlHttp.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误！");
   }
 }
}

发送请求

//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName").value;
var upass= document.getElementsByName("userPass").value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" +Math.random();
// 增加time随机参数，防⽌读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头，POST如果有数据⼀定加加！！！！
xmlHttp.send(params);

三.jquery的ajax操作

ajax()⽅法

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    //用jquery就可以不用设置test方法直接function匿名函数
    $(function(){
        $("#username").blur(function(){//指定的username的函数
            //1.获得value值
            var uname = $(this).val();
            //2.发送请求
            $.ajax({
               url:"/testuname",//目标地址
               data:"username="+uname,//传输的内容 --- 因为服务器的接受情况是username带头所以要加个相对的字符
               type:"post",
               dataType:"text",//返回的数据类型
               success:function(rs){//span反馈回来的内容
                 $("#rs").html(rs);
               }
                });          
        });
    })
</script>
<body>
            用户名:<input type="text" id="username">
             <span id="rs"></span><br>
</body>
</html>

get() ⽅法通过远程 HTTP GET 请求载⼊信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
     
            $.get("/testuname","username="+uname,function(rs){
                 $("#rs").html(rs);
              });
              
</script>
<body>
            用户名:<input type="text" id="username">
             <span id="rs"></span><br>
</body>
</html>

post() ⽅法通过远程 HTTP GET 请求载⼊信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

             $.post("/testuname","username="+uname,function(rs){
                $("#rs").html(rs);
             });
 
</script>
<body>
            用户名:<input type="text" id="username">
             <span id="rs"></span><br>
</body>
</html>

四.JSON

Json定义格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        //1.定义json
        var j1={"name":"张三","age":18};
       // alert(j1.name+","+j1.age);
        //数组
        var j2={"names":["aa","bb","cc"]};
        alert(j2.names[1]);
        //json数组内容
        var j3={"users":[{"name":"张三1","age":18},{"name":"张三2","age":15},{"name":"张三3","age":13}]};
        alert(j3.users[2].name);

    </script>
</head>
<body>

</body>
</html>

java对象和json之间的转换

java->json：

Users user2=new Users();
user2.setUsername("李四");
user2.setPassword("abc");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的

json->java：

String str="{'username':'李四','password':'admin','age':19}";
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);

java集合->json数组

List list=new ArrayList();
list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set也是这么转

json数组->java集合

String str2="[{'age':20,'password':'abc','username':'李四'},{'age':10,'password':'adb','username':'张三'}]";
JSONArray json2=JSONArray.fromObject(str2);
Object[] obj=(Object[])JSONArray.toArray(json2,Users.class);

实现数据的⾃动填充

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#uid").blur(function(){//输入id框后onblor
            //1.获得value值
            var uid = $(this).val();
            //2.发送请求
            $.post("/getuser","uid="+uid,function(rs){
                //转换成可以处理的js
                rs=eval("("+rs+")");
                //此时的rs是json格式的对象
                $("#uname").val(rs.name);
                $("#pass").val(rs.password);
                $("#money").val(rs.money);
            });
        });
    })

</script>
<body>
    uid:<input type="text" id="uid"><br>
    name:<input type="text" id="uname"><br>
    pass:<input type="text" id="pass"><br>
    money:<input type="text" id="money">
</body>
</html>


@WebServlet(urlPatterns = "/getuser")
public class GetUsersServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         //1.接收参数
        String uid = req.getParameter("uid");//接受前端传入的数字
        int userid= Integer.parseInt(uid);//换格式

        //可以调用数据库 参考之前的  现在的我也忘了不想写
        Users users=null;
        switch (userid){
            case  1:
                users=new Users(1,"张三","abc",11);
                break;
            case  2:
                users=new Users(2,"张三2","abc2",222);
                break;
            case  3:
                users=new Users(3,"张三3","abc3",33);
                break;
            case  4:
                users=new Users(4,"张三4","abc4",44);
                break;
            default:
                users=new Users();
        }

    }
}

jacoputh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX介绍

AJAX一.AJAX1.1 Ajax简介1.2 Ajax所包含的技术1.3 XMLHttpRequest常⽤属性1.4 XMLHttpRequest⽅法二.Ajax编程步骤三.jquery的ajax操作四.JSON一.AJAX1.1 Ajax简介Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下异步同步的概念同步：就是有顺序的进行，用户先给服务器发送请求
复制链接

扫一扫