精华内容
下载资源
问答
  • AJAX请求

    千次阅读 2020-12-15 11:17:40
    目录AJAX请求什么是AJAX请求jQuery中的AJAX请求$.ajax 方法$.get 方法和 $.post 方法$.getJSON 方法表单序列化 serialize() AJAX请求 什么是AJAX请求 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript...

    AJAX请求

    什么是AJAX请求

    Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

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

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

    同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

    #发起AJAX请求#

    1. 创建XMLHttpReq对象
    2. 调用open方法设置参数
    3. 调用send方法发送请求
    4. 在send方法前绑定onreadystatechange事件,处理请求完成后操作

    function ajaxRequest() {
     // 1、我们首先要创建XMLHttpRequest 
    var xmlhttprequest = new XMLHttpRequest();
      //2、调用open方法设置请求参数
    xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
      //4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
    xmlhttprequest.onreadystatechange = function(){
    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
    	alert("收到服务器返回的数据:" + xmlhttprequest.responseText);
    	var jsonObj = JSON.parse(xmlhttprequest.responseText);
    	// 把响应的数据显示在页面上
    	document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
    		}
    }
     // 3、调用send方法发送请求
    	xmlhttprequest.send();
    

    类AjaxServlet代码(用于响应AJAX请求)


    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了");
        Person person = new Person(1, "张三");
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
    
        resp.getWriter().write(personJsonString);
    }
    

    JSON点这理

    JSON是客户端和服务端之间业务数据的传递格式

    jQuery中的AJAX请求

    $.ajax 方法

    • url 表示请求的地址
    • type 表示请求的类型 GET 或 POST 请求
    • data 表示发送给服务器的数据
      • 格式有两种:

        一: name=value&name=value

        二: {key:value}
    • success 请求成功, 响应的回调函数
    • dataType 响应的数据类型
      • 常用的数据类型有:
        • text 表示纯文本
        • xml 表示 xml 数据
        • json 表示 json 对象

    // ajax请求
    $("#ajaxBtn").click(function(){
    	$.ajax({
    		url:"http://localhost:8080/json/ajaxServlet",
    		//调用servlet方法
    		// data:"action=jQueryAjax",			
    		data:{action:"jQueryAjax"},
    		type:"GET",
    		success:function (data) {
    			// alert("服务器返回的数据是:" + data);
    			// var jsonObj = JSON.parse(data);
    			$("#msg").html(" ajax 编号:" + data.id + " , 姓名:" + data.name);
    		},
    		//返回数据的格式
    		dataType : "json"
    	});
    });
    

    $.get 方法和 $.post 方法

    • url 请求的 url 地址
    • data 发送的数据
    • callback 成功的回调函数
    • type 返回内容格式,xml, html, script, json, text, _default。

    // ajax--get请求
    $("#getBtn").click(function(){
    
    	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
    		$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);
    	},"json");
    	
    });
    

    $.getJSON 方法

    • url 请求的 url 地址
    • data 发送给服务器的数据
    • callback 成功的回调函数

    // ajax--getJson请求
    $("#getJSONBtn").click(function(){
    	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
    		$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
    	});
    });
    

    表单序列化 serialize()

    • serialize()可以把表单中所有表单项的内容都获取到, 并以 name=value&name=value 的形式进行拼接。

    // ajax请求
    $("#submit").click(function(){
    	// 把参数序列化,通过requst请求发送过去
    	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
    		$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
    	});
    });
    
    展开全文
  • JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析(代码实例) 运行环境:MyEclipse
  • ajax请求拦截器

    2013-03-15 16:50:42
    struts2在struts2.xml里配置拦截器可以过滤到指定的url的请求,但是对于ajax请求确是过滤不了,比如说sesion超时或某些页面有权限控制的,通过ajax请求时系统会报错最近在解决此类问题时碰上了找了不少资料,...
  • Ajax请求的五个步骤

    万次阅读 多人点赞 2020-06-02 14:01:22
    Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新...

    目录

    Ajax请求的五个步骤

    一、定义

    1、什么是Ajax

    2、同步与异步的区别

    3、ajax的工作原理

    二、实现AJAX的基本步骤

    1、创建XMLHttpRequest对象

    2、创建HTTP请求

    3、设置响应HTTP请求状态变化的函数

    4、设置获取服务器返回数据的语句

    5、发送HTTP请求

    6、局部更新

    三、完整的AJAX实例


    Ajax请求的五个步骤

    一、定义

    1、什么是Ajax

    Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。

    2、同步与异步的区别

    同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。

    异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。

    3、ajax的工作原理

    客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:

    ajax请求的五个步骤

    二、实现AJAX的基本步骤

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

    1. 创建XMLHttpRequest对象,即创建一个异步调用对象.
    2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    3. 设置响应HTTP请求状态变化的函数.
    4. 发送HTTP请求.
    5. 获取异步调用返回的数据.
    6. 使用JavaScript和DOM实现局部刷新.

    1、创建XMLHttpRequest对象

          不同浏览器使用的异步调用对象有所不同,在IE浏览器中异步调用使用的是XMLHTTP组件中的XMLHttpRequest对象,而在Netscape、Firefox浏览器中则直接使用XMLHttpRequest组件。因此,在不同浏览器中创建XMLHttpRequest对象的方式都有所不同.

        在IE浏览器中创建XMLHttpRequest对象的方式为:

    var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

        在Netscape浏览器中创建XMLHttpRequest对象的方式为:

    var xmlHttpRequest = new XMLHttpRequest();

        由于无法确定用户使用的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种方法都加上.如以下代码所示:

    var xmlHttpRequest;  //定义一个变量,用于存放XMLHttpRequest对象
    createXMLHttpRequst();   //调用创建对象的方法
    //创建XMLHttpRequest对象的方法 
    function createXMLHttpRequest(){                                                 
        if(window.ActiveXObject) {//判断是否是IE浏览器
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
        }else if(window.XMLHttpRequest){//判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器
            xmlHttpRequest = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
        }
    }

           "if(window.ActiveXObject)"用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.

          "else if(window.XMLHttpRequest)"是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.

          如果浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件,那么就不会对xmlHttpRequest变量赋值.

    2、创建HTTP请求

           创建了XMLHttpRequest对象之后,必须为XMLHttpRequest对象创建HTTP请求,用于说明XMLHttpRequest对象要从哪里获取数据。通常可以是网站中的数据,也可以是本地中其他文件中的数据。

           创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:

    XMLHttpRequest.open(method,URL,flag,name,password);

    代码中的参数解释如下所示:

    • method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。

    • URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。

    • flag:该参数为可选,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步,默认为true。

    • name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。

    • password:该参数为可选,用于输入密码。若服务器需要验证,则必须使用该参数。

    通常可以使用以下代码来访问一个网站文件的内容。      

    xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);

    或者使用以下代码来访问一个本地文件内容:

    xmlHttpRequest.open("get","ajax.htm",true);

    注意:如果HTML文件放在Web服务器上,在Netscape浏览器中的JavaScript安全机制不允许与本机之外的主机进行通信。也就是说,使用open()方法只能打开与HTML文件在同一个服务器上的文件。而在IE浏览器中则无此限制(虽然可以打开其他服务器上的文件,但也会有警告提示)。

    3、设置响应HTTP请求状态变化的函数

           创建完HTTP请求之后,应该就可以将HTTP请求发送给Web服务器了。然而,发送HTTP请求的目的是为了接收从服务器中返回的数据。从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。

    1. 未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。
    2. 初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
    3. 发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。
    4. 接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。
    5. 完成状态。XMLHttpRequest对象接收数据完毕后,进入完成状态,此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用responseText属性或responseXml属性来获取数据。

            只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态。

           XMLHttpRequest对象可以响应readystatechange事件,该事件在XMLHttpRequest对象状态改变时(也就是readyState属性值改变时)激发。因此,可以通过该事件调用一个函数,并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示:

    //设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
    xmlHttpRequest.onreadystatechange = getData;
    
    //定义函数
    function getData(){
        //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
        if(xmlHttpRequest.readyState == 4) {
            //设置获取数据的语句
        }
    }

    4、设置获取服务器返回数据的语句

           如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

           但是,异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值,只有该属性值为200,才表示异步调用成功,因此,要获取服务器返回数据的语句,还必须要先判断XMLHttpRequest对象的status属性值是否等于200,如以下代码所示:

     if(xmlHttpRequst.status == 200) {
        document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
        //document.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
     }

    注意:如果HTML文件不是在Web服务器上运行,而是在本地运行,则xmlHttpRequest.status的返回值为0。因此,如果该文件在本地运行,则应该加上xmlHttpRequest.status == 0的判断。

            通常将以上代码放在响应HTTP请求状态变化的函数体内,如以下代码所示:       

    //设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号
    xmlHttpRequest.onreadystatechange = getData;
    
    //定义函数
    function getData(){
        //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成
        if(xmlHttpRequest.readyState==4){
            if(xmlHttpRequest.status == 200 || xmlHttpRequest.status == 0){//设置获取数据的语句
                document.write(xmlHttpRequest.responseText);//将返回结果以字符串形式输出
                //docunment.write(xmlHttpRequest.responseXML);//或者将返回结果以XML形式输出
            }
        }
    }

    5、发送HTTP请求

           在经过以上几个步骤的设置之后,就可以将HTTP请求发送到Web服务器上去了。发送HTTP请求可以使用XMLHttpRequest对象的send()方法,其语法代码如下所示:

    XMLHttpRequest.send(data);

           其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。data参数的格式与在URL中传递参数的格式类似,以下代码为一个send()方法中的data参数的示例:

    name=myName&value=myValue

           只有在使用send()方法之后,XMLHttpRequest对象的readyState属性值才会开始改变,也才会激发readystatechange事件,并调用函数。

    6、局部更新

           在通过Ajax的异步调用获得服务器端数据之后,可以使用JavaScript或DOM来将网页中的数据进行局部更新。

    三、完整的AJAX实例

    <html>
    <head>
    <title>AJAX实例</title>
    <script language="javascript" type="text/javascript">   
        function ajaxHttpRequestFunc(){
    		let xmlHttpRequest;  // 创建XMLHttpRequest对象,即一个用于保存异步调用对象的变量
    		if(window.ActiveXObject){ // IE浏览器的创建方式
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){ // Netscape浏览器中的创建方式
                xmlHttpRequest = new XMLHttpRequest();
            }
    		xmlHttpRequest.onreadystatechange=function(){ // 设置响应http请求状态变化的事件
                console.log('请求过程', xmlHttpRequest.readyState);
    			if(xmlHttpRequest.readyState == 4){ // 判断异步调用是否成功,若成功开始局部更新数据
    				console.log('状态码为', xmlHttpRequest.status);
    				if(xmlHttpRequest.status == 200) {
    					console.log('异步调用返回的数据为:', xmlHttpRequest .responseText);
    					document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText; // 局部刷新数据到页面
    				} else { // 如果异步调用未成功,弹出警告框,并显示错误状态码
    					alert("error:HTTP状态码为:"+xmlHttpRequest.status);
    				}
    			}
    		}
    		xmlHttpRequest.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true); // 创建http请求,并指定请求得方法(get)、url(https://www.runoob.com/try/ajax/ajax_info.txt)以及验证信息
    		xmlHttpRequest.send(null); // 发送请求
        }
    </script>
    </head>
    <body>
        <div id="myDiv">原数据</div>
        <input type = "button" value = "更新数据" onclick = "ajaxHttpRequestFunc()">
    </body>
    </html>

     直接运行该段代码可能会出现跨域的现象,控制台的报错信息如下:

    这是因为代码中设置请求的是菜鸟驿站服务端的文件,所以出现跨域导致未正常获取到服务端返回的数据。

    解决办法:复制该段代码在菜鸟驿站的编辑器中粘贴运行即可。

    点击运行前页面显示为:

    点击运行后页面显示为:

    好啦,关于ajax的部分到此就全部学习完成了,给自己点一个大大的赞吧!

     

     

    参考文献:

    【1】https://qqe2.com/java/post/28.html

    【2】https://www.cnblogs.com/kennyliu/p/3876729.html

    展开全文
  • 通过页头生成Token,进行请求验证,解决Ajax请求安全问题。目前为止我做的最多的防止ajax请求攻击的就是添加验证码、添加随机Token,限制同一请求在规定时间内的最大请求数量、服务器端校验数据正确性、尽量使用POST...
  • 什么是Ajax以及ajax请求的步骤

    万次阅读 多人点赞 2019-04-18 15:56:10
    什么是Ajax以及ajax请求的步骤 1.Ajax是什么? Asynchronous JavaScript & XML。Ajax是web开发的一种技术。 2.Ajax请求的步骤 (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象; (2)创建一个新的`...

    什么是Ajax以及ajax请求的步骤

    1.Ajax是什么?

    Asynchronous JavaScript & XML。Ajax是web开发的一种技术。

    2.Ajax请求的步骤

    (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象;

    (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息;

    (3)设置响应`HTTP`请求状态变化的函数;

    (4)发送`HTTP`请求;

    (5)获取异步调用返回的数据;

    (6)使用JavaScript和DOM实现局部刷新。

    3.XMLHttpRequest对象

    (1)对象类型的API;

    (2)在浏览器环境使用;

    (3)用于客户端和服务端数据的传递和接收;

    (4)用于请求XML数据(JSON/TEXT)。

    4.readyState状态码

    0:请求未初始化

    1:服务器连接已建立

     2:请求已接收

     3:请求处理中

     4:请求已完成,且响应已就绪

    5.http状态码(status)

    200:(成功)

    403:(禁止)服务器拒绝请求

    404:(未找到)服务器找不到请求的页面

    408:(请求超时)服务器等候请求发生超时

    500:(服务器内部错误)服务器遇到错误,无法完成请求

    6.onload和onreadystatechange

    当onload执行时readyState只可能为4

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ajax</title>
    </head>
    
    <style>
        html {
            font-family: Arial, Helvetica, sans-serif;
            padding: 10px 20px;
        }
    </style>
    
    <body>
        <h3>Ajax是什么?</h3>
        <p>Asynchronous JavaScript & XML。Ajax是web开发的一种技术。</p>
    
        <h3>Ajax请求的步骤</h3>
        <p>
            (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象;
            <br /> (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方式、`URL`及验证信息;
            <br /> (3)设置响应`HTTP`请求状态变化的函数;
            <br /> (4)发送`HTTP`请求;
            <br /> (5)获取异步调用返回的数据;
            <br /> (6)使用JavaScript和DOM实现局部刷新。
        </p>
    
        <h3>XMLHttpRequest对象</h3>
        <p>
            (1)对象类型的API;
            <br />(2)在浏览器环境使用;
            <br />(3)用于客户端和服务端数据的传递和接收;
            <br />(4)用于请求XML数据(JSON/TEXT)。
        </p>
    
        <h3>readyState状态码</h3>
        <p>
            0:请求未初始化
            <br /> 1:服务器连接已建立
            <br /> 2:请求已接收
            <br /> 3:请求处理中
            <br /> 4:请求已完成,且响应已就绪
        </p>
    
        <h3>http状态码(status)</h3>
        <p>
            200:(成功)
            <br /> 403:(禁止)服务器拒绝请求
            <br /> 404:(未找到)服务器找不到请求的页面
            <br /> 408:(请求超时)服务器等候请求发生超时
            <br /> 500:(服务器内部错误)服务器遇到错误,无法完成请求
        </p>
        <button>ajax请求</button>
        <h2></h2>
    
        <script>
            document.querySelector("button").addEventListener("click", getAjax);
    
            function getAjax() {
                //1.创建XMLHttpRequest对象
                let xhr = new XMLHttpRequest();
                //open(type,url,async)
                xhr.open("GET", "http://jsonplaceholder.typicode.com/posts/1", true);
                console.log(xhr.readyState); //1
    
                //进程
                xhr.onprogress = function() {
                    console.log(xhr.readyState); //3
                }
    
                //两种请求方式onload/onreadystatechange
                //onload
                // xhr.onload = function() {
                //     console.log(xhr.readyState); //4
                //     document.querySelector("h2").innerHTML = JSON.parse(this.responseText).body;
                // };
                //onreadystatechange
                xhr.onreadystatechange = function() {
                    console.log(xhr.readyState);
                    console.log(xhr.status);
                    if (xhr.readyState == 4 && xhr.status == 200) {//修改dom
                        document.querySelector("h2").innerHTML = JSON.parse(this.responseText).title;
                    } else if (xhr.status = 404) {
                        document.querySelector("h2").innerHTML = xhr.statusText;
                    }
                };
    
                //发送请求
                xhr.send();
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • AJAX请求是什么?

    千次阅读 2020-04-23 11:31:53
    文章目录什么是AJAX请求?原生AJAX请求的示例:jQuery中的AJAX请求 什么是AJAX请求? AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 ajax是一...

    什么是AJAX请求?

    • AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
      ajax是一种浏览器通过js异步发起请求,局部更新页面的技术。
      Ajax请求的局部更新,浏览器地址栏不会发生变化
      局部更新不会舍弃原来页面的内容

    原生AJAX请求的示例:

    <!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://localhost:8080/16_json_ajax_i18n/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对象(直接将字符串转换成为json对象)

    $("#ajaxBtn").click(function(){
       $.ajax({
          url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
          // data:"action=jQueryAjax",
          data:{action:"jQueryAjax"},
          type:"GET",
          success:function (data) {
             // alert("服务器返回的数据是:" + data);
             // var jsonObj = JSON.parse(data);
             $("#msg").html("编号:" + data.id + " , 姓名:" + data.name);
          },
          dataType : "json"
       });
    });
    

    $ . g e t 方 法 和 .get方法和 .get $ . p o s t 方 法 .post方法 .post
    url   请求的url地址
    data   发送的数据
    callback   成功的回调函数
    type    返回的数据类型

    // ajax--get请求
    $("#getBtn").click(function(){
       $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
          $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);
       },"json");
    });
    // ajax--post请求
    $("#postBtn").click(function(){
       $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
          $("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
       },"json");
    });
    

    $.getJSON方法
    url   请求的url地址
    data   发送给服务器的数据
    callback   成功的回调函数

    // ajax--getJson请求
    $("#getJSONBtn").click(function(){
       $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
          $("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
       });
    });
    

    表单序列化serialize()
    serialize()可以把表单中所有表单项的内容都获取到,并以name=value&name=value的形式进行拼接。

    // ajax请求
    $("#submit").click(function(){
       // 把参数序列化
       $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
          $("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
       });
    });
    
    展开全文
  • ajax请求携带cookie、自定义header总结: 错误: 1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true。 正确: 1.ajax同域请求下,ajax会自动带上同源的cookie; 2.ajax同域...
  • Jquery progressbar通过Ajax请求获取后台进度演示(Struts2)
  • ajax 请求设置请求请求头携带cookie

    千次阅读 2021-01-12 19:51:01
    ajax 请求设置请求请求头携带cookie ajax 请求时设置请求头,需要在请求中添加 withCredentials为true $.ajax({ url:请求地址, datatype:数据类型, type:请求类型, // post、get、delete、put data:请求数据, ...
  • jQuery发送Ajax请求

    万次阅读 多人点赞 2018-04-23 01:21:16
    Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量数据,通过JavaScript DOM更新一部分节点。期间数据传输可采用xml,json等格式,Ajax最早用于谷歌的搜索提示。 其实不刷新...
  • Ajax 请求的三种写法

    千次阅读 2019-09-20 10:37:28
    Ajax 请求简介: Ajax即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术 ajax技术的目的: 是让js发送http请求,实现与服务端通信,即数据交互 ...
  • html的ajax请求

    千次阅读 2020-09-14 16:06:02
    页面中ajax发起请求,controller接收数据并处理 这次ajax的测试以访问html的方式配置 配置yml文件: 然后在 src/main/webapp下创建一个html页面 创建controller: 运行项目就可以访问到index.html: 引入...
  • Ajax请求get方式

    千次阅读 2020-12-18 20:52:37
    Ajax GET请求方式 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GET</title> </head> <body> <button id="app">点击...
  • Laravel Ajax请求

    千次阅读 2020-04-14 16:02:05
    Laravel Ajax请求总结 Ajax请求方法 1、页面需要添加 <meta name="csrf-token" content="{{ csrf_token() }}"> 2、如果是form表单需要添加 {{ csrf_field() }} 或 <input type="hidden" name="_token" ...
  • 手写一个ajax请求

    千次阅读 2019-06-21 12:50:19
    1.需求:手动封装一个ajax请求 2.实现如下: 2.1获取异步请求对象 // 获取异步请求对象 function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttprequest(); }else{ // 如果浏览器...
  • ajax请求中自定义添加请求头

    千次阅读 2019-06-11 11:50:08
    在使用ajax请求业务接口时需要使用请求头进行身份验证,方式如下: $(function () { $.ajax({ type: 'GET', url: '/xxxx-api/openapi/url/getBusinessUrl', data: 'ip=10.10.190.1&bizCode=JDCWFCX', ...
  • Ajax请求携带Cookie

    千次阅读 2020-09-09 10:14:00
    目录xhrajax cookie跨域处理客户端服务端服务端设置跨域的几种方式方式一 重写addCorsMappings方法方式二 对单个接口处理方式三 @CrossOrigin注解方式四 nginx配置添加允许跨域请求 xhr 先来了解下xhr xhr,全称为...
  • Python爬虫 之Ajax请求

    千次阅读 2020-08-17 11:27:07
    AJAX 是 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)的缩写。AJAX 通过使用原有的 web 标准组件,实现了在不重新加载整个页面的情况下,与服务器进行数据交互。例如在新浪微博中,你可以展开一条...
  • ajax请求报400

    千次阅读 2020-03-19 18:25:08
    1、可能是由于发送请求时发送的参数类型和Controller中的参数类型不...'这样取出来的值是string,而我后台定义的int clGrade,就会报400错误,所以前面ajax请求里面的data应该是value=<%= session.getAttribute("c...
  • 原生js与JQuery的ajax请求

    千次阅读 多人点赞 2020-08-13 11:52:08
    原生js的ajax请求 1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); 2.准备发送请求 open() xhr.open('请求类型','url地址',是否异步); 参数 描述 请求类型 GET 或 POST url 文件在服务器上的...
  • jQuery Ajax请求基础

    千次阅读 2019-04-11 20:12:44
    jQuery Ajax请求基础 Ajax是前端开发中非常常用的API之一,因此写个文章记录一下如何使用jQuery中的Ajax 请求 1.准备jQuery jQuery下载地址 下载jQuery 前端页面 <!DOCTYPE html> <html> <head> ...
  • 最近遇到一个需求,前端传给后端用户信息,经过后端加密后,返回前端一个URL地址,要求前端拿到请求回来的URL地址,并跳转到URL所指向的页面。在坑里爬了很久,总结出是三种解决方案,供碰到相似问题的小伙伴参考。 ...
  • springMVC实现处理ajax请求

    千次阅读 2018-03-01 14:32:25
    ssm项目经常会使用到ajax提交表单,controller层来接收和处理ajax请求并且回传一个对象,下面实现一个简单的处理ajax请求的功能。一、项目要求jsp页面提供注册功能,利用ajax提交表单,controller实现回传一个对象,...
  • JavaScript实现同步Ajax请求的两种方式

    千次阅读 2020-09-08 15:14:34
    JavaScript的Ajax请求默认是异步的,有以下两种方式能让Ajax请求变成同步 方式一 使用ES7的Async和Await async function main(){ const env = await queryEnv('141001') console.log(env) } async function ...
  • ajax请求报415错误解决方案

    千次阅读 2019-09-16 15:58:35
    报错ajax代码: 后台代码: 正确得ajax代码(需要将参数转为json类型):
  • Ajax请求数据之前、之后

    千次阅读 2019-06-03 13:19:12
    Ajax请求数据之前、之后 前端从后台请求数据,通常采用Ajax,在网络慢的情况下,页面会有空白页出现,为了解决这类问题,加载中通常会有一个loading样式,代表正在加载,此时就需要Ajax的beforeSend、complete方法;...
  • Axios取消请求ajax请求

    万次阅读 2020-07-02 15:23:08
    用户需要快速请求,比如抢购,前一次的请求数据是毫无意义的,直接取消就完事了 接口返回数据占用同一个dom,比如快速切换tab后,前一次请求比后一次请求响应慢,这时的tab页已经切过去了,可是数据却是前一个tab页的 ...
  • 实现一个ajax请求的简单例子

    万次阅读 多人点赞 2019-04-10 16:31:40
    效果:在前端页面的text框输入一个id,点击按钮,发送ajax请求到数据库查询对应用户数据返回,将用户信息显示在页面,实现局部刷新。 不说废话直接来! 1.前端的jsp页面 (代码的注释写的非常详细了,直接看代码就...
  • ajax请求和普通请求的区别

    千次阅读 2019-11-06 17:02:12
    使用ajax请求,当前窗口/文档不受影响,JavaScript代码可以检查请求的结果,并使用这些结果执行所需的操作(将HTML动态插入页面,解析JSON并将其用于页面逻辑,解析XML等等)。 服务器不会做任何不同的事情 – 这只是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 398,157
精华内容 159,262
关键字:

ajax请求