AJAX和$.ajax的使用方式

最新推荐文章于 2024-04-21 13:45:46 发布

ljf8838

最新推荐文章于 2024-04-21 13:45:46 发布

阅读量608

点赞数 1

分类专栏： web 文章标签： ajax

本文链接：https://blog.csdn.net/ljf12138/article/details/103100536

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

什么是AJAX
AJAX异步实现步骤
ajax实例
$.ajax介绍
$.ajax实例

什么是AJAX

ajax，全称Asynchronous JavaScript and XML，叫做异步请求，常用于做页面局部刷新
AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript：使用脚本对象 XMLHttpRequest 发送请求，接收响应数据
XML：发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

AJAX异步实现步骤

创建异步对象
var xmlHttp = new XMLHttpRequest();
onreadystatechange事件

xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState ==4 xmlHttpstatus == 200){
		处理服务器返回的数据
	}
}

XMLHttpRequest 对象的三个重要的属性：
onreadystatechange 属性：一个 js 函数名或直接定义函数，每当 readyState 属性改变时，就会调用该函数
readyState 属性：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
• 0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
• 1：初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
• 2：异步对象发送请求， xmlHttp.send()
• 3：异步对象接收应答数据从服务端返回数据。XMLHttpRequest 内部处理。
• 4：异步请求对象已经将数据解析完毕。此时才可以读取数据。
status 属性：
200： “OK”,请求处理成功
404：未找到页面
3. 初始化请求参数
xmlHttp.open(method,url,async)
• method：请求的类型；GET 或 POST
• url：服务器的 servlet 地址
• async：true（异步）或 false（同步）
4. 发送请求
xmlHttp.send()
5. 接收服务器响应的数据
xmlHttp.responseText;
XMLHttpRequest对象的属性：
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据

ajax实例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用ajax</title>
    <script type="text/javascript">
        function search() {
            //获取proid
            var proid = document.getElementById("proid").value;
            //创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //绑定事件
            xmlHttp.onreadystatechange = function () {
                //等待服务器端返回数据，请求成功后，在处理数据
                // xmlHttp.readyState == 4 : 从服务器端获取数据，在浏览器中解析数据成功。
                // xmlHttp.status ==200 请求处理成功
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取服务器的数据
                    var resp = xmlHttp.responseText;
                    //把 json格式的字符串转为  js中的对象Object ，使用eval()
                    var obj = eval("("+ resp+")");
                    //更新页面数据
                    callback(obj);
                }
            }
            //初始化请求参数
            xmlHttp.open("get","searchJson?proid="+proid,true);
            //发送请求
            xmlHttp.send();
        }
        function callback(jsonobj) {
            //在XMLHttpRequest从服务端取回数据后，调用这个方法，
            //在这个方法中更新 页面dom中的数据
            document.getElementById("proname").value=jsonobj.name;
            document.getElementById("projiancheng").value=jsonobj.jiancheng;
            document.getElementById("proshenghui").value=jsonobj.shenghui;
        }
    </script>
</head>
<body>
  <div align="center">
      <form action="" method="post">
          <table border="1">
              <tr>
                  <td>省份编号：</td>
                  <td>
                      <input type="text" id="proid" value="">
                      <input type="button" onclick="search()" value="搜索">
                  </td>
              </tr>
              <tr>
                  <td>省份名称：</td>
                  <td><input type="text" id="proname" value="省名称"></td>
              </tr>
              <tr>
                  <td>省份简称：</td>
                  <td><input type="text" id="projiancheng" value="省份简称"></td>
              </tr>
              <tr>
                  <td>省会：</td>
                  <td><input type="text" id="proshenghui" value="省会名称"></td>
              </tr>
          </table>
      </form>
  </div>
</body>
</html>

$.ajax介绍

$.ajax有json格式的参数，各个参数以键值对的方式存在，各键值对以逗号分隔
$.ajax({
url:请求或请求地址,
type:请求方式post/get,
data :请求参数，可以以json格式传递参数,
dataType:预期服务器返回值类型。可以是xml,text,html,script,json,jsonp，但我们一般使用json,
success:function(result){ //result通常也会用resp代替
请求成功接收的返回值，和操作
}
})

更具体的用法可参考jquery在线手册

$.ajax实例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>项目首页，处理jquery级联查询</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //在页面dom对象加载完成后执行的，当前方法
            //访问servlet， 获取省份的json数据
            $.ajax({
                url:"queryProvince",
                type:"GET",
                dataType:"json",
                async:true,
                success:function (resp, staus, xhr) {
                    //resp:服务器端返回的数据
                    // [{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{}]
                    // <option value="1">河北</option>
                    $.each(resp,function(i,n){
                        $("#province").append("<option value='"+n.id+"'>"+n.name+"</option>");
                    })
                },
                error:function (xhr,status,error) {
                    alert("请求错误："+error);
                }
            })
            //给省份select， 绑定change事件
            $("#province").on("change",function(){
                //根据省份id，发起获取城市信息的ajax请求
                var proid = $("#province > option:selected").val();
                //当proid=0时不用发起请求
                if( proid == "0"){
                    alert("请选择一个省份");
                } else {
                    $.post("queryCity",{"proid":proid}, callback,"json")
                }
            })
        })
        function callback(result) {
            // 清楚历史数据
            $("#city").empty();
            //[{"id":1,"name":"石家庄市","proviceId":1},{}]
            $.each(result,function (i,n) {
                $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
            })
        }
    </script>
</head>
<body>
    <div align="center">
        <p>juqery-ajax练习</p>
        省份列表：
        <select id="province">
            <option value="0">请选择省份</option>
        </select>
        <br>
        <br>
        城市列表:
        <select id="city">
            <option value="0">选择城市</option>
        </select>
    </div>
</body>
</html>

ljf8838

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
AJAX和$.ajax的使用方式

文章目录什么是AJAXAJAX异步实现步骤ajax实例$.ajax介绍$.ajax实例什么是AJAXajax，全称Asynchronous JavaScript and XML，叫做异步请求，常用于做页面局部刷新AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaSc...
复制链接

扫一扫