ajax请求学习

AJAX请求

 

什么是AJAX请求：AJAX即“Asynchronous Javascript And Xml”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

　　ajax是一种浏览器通过js异步发起请求，局部更新页面的技术。

　　AJAX请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容！

JavaScript原生Ajax请求：

　　原生的Ajax请求：

　　　　1.我们首先要创建XMLHttpRequest对象

　　　　2.调用open方法设置请求参数

　　　　3.调用send方法发送请求

　　　　4.在send方法前绑定onreadystatechange时间，处理请求完成后的操作

原生AJAX请求的示例：

　　创建一个html页面，发起请求：

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            //在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
            function ajaxRequest() {
//                 1、我们首先要创建XMLHttpRequest 
                var xmlhttprequest = new XMLHttpRequest();
//                 2、调用open方法设置请求参数
                xmlhttprequest.open("GET","http://lovalhost:8089/16_JSON/ajaxServlet?action=javaScriptAjax",true);
//                4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
                xmlhttprequest.onreadystatechange = function () {
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
                    var jsonObj =     JSON.parse(xmlhttprequest.responseText);

                        //把响应的数据显示在页面上
                        document.getElementById("div01").innerHTML = "编号"+jsonObj.id+"姓名"+jsonObj.name;

                    }
                }
//                 3、调用send方法发送请求
                xmlhttprequest.send();



            }
        </script>
    </head>
    <body>    
        <button onclick="ajaxRequest()">ajax request</button>
        <div id="div01">
        </div>
    </body>
</html>
复制代码

 

　jQuery中的AJAX请求：

　　$.ajax方法

　　　　url　　　　　表示请求的地址

　　　　type　　　　表示请求的类型GET或POST请求

　　　　data　　　　表示发送给服务器的数据

　　　　　　格式有两种：

　　　　　　　　　　一：name=value&name-value

　　　　　　　　　　二：{key:value}

　　　　success　　请求成功，响应的回调函数

　　　　dataType　　响应的数据类型

　　　　　　　　　　　　常用的数据类型有：

　　　　　　　　　　　　　　text　　　　表示纯文本

　　　　　　　　　　　　　　xml　　　　表示xml数据

　　　　　　　　　　　　　　json　　　　表示json对象

 

 

下面的方法必须遵守参数的顺序
　　　　$.get 请求和$.post 请求
　　　　　　url:　　　　　　　请求的 URL 地址
　　　　　　data:　　　　　 　待发送 Key/value 参数。
　　　　　　callback:　　　  　载入成功时回调函数。
　　　　　　type:　　　　　 　返回内容格式，xml, html, script, json, text。
 

 

 

　　　　Jquery 的$.getJSON方法
　　　　　　url:　　　　　　   待载入页面的 URL 地址“玩转”Java 系列
　　　　　　data:　　　　　　待发送 Key/value 参数。
　　　　　　callback:　　　 　载入成功时回调函数。

 

 　　　　表单序列化seriallze（）

　　　　　　seriallze（）可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接。

posted @ 2023-03-02 16:34  QV  阅读(51)  评论(0)    收藏  举报