ajax 订阅
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 展开全文
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
信息
外文名
Asynchronous Javascript And XML And HTML
表达式
Ajax
应用学科
IT
中文名
异步JavaScript和XML 或 HTML
适用领域范围
Web 前端开发
ajax名称来源
Ajax 这个术语源自描述从基于 Web 的应用到基于数据的应用。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。Ajax可使因特网应用程序更小、更快,更友好。 Ajax 是一种独立于 Web 服务器软件的浏览器技术。 Ajax 基于下列 Web 标准:JavaScript、XML、HTML与 CSS 在 Ajax 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。Ajax 应用程序独立于浏览器和平台。Web 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开发。不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。通过 Ajax,因特网应用程序可以变得更完善,更友好。
收起全文
精华内容
下载资源
问答
  • Ajax

    千次阅读 多人点赞 2019-02-11 17:05:38
    Ajax Ajax 是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现...

    Ajax

    Ajax 是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。
    Ajax = 异步 JavaScript + XML。
    Ajax 是一种用于创建快速动态网页的技术。
    通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    • Ajax 用于创造动态性更强的应用程序
    • Ajax 可用来与数据库进行动态通信
    • Ajax 可用来与 XML 文件进行交互通信

    创建 XMLHttpRequest 对象

    XMLHttpRequest 是 Ajax 的基础。
    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    语法
    variable = new XMLHttpRequest();
    

    为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject。

    var xmlhttp;
    if( window.XMLHttpRequest) {
    	// code for IE7+, Firefox, Chrome, Opera, Safari
    	xmlhttp = new XMLHttpRequest();
    } else {
    	// code for IE6, IE5
    	xmlhttp = new ActiveXObject("Microsoft XMLHttp");
    }
    

    Ajax——向服务器发送请求

    如需将请求发送至服务器,使用 XMLHttpRequest 对象的 open()send()方法:

    xmlhttp.open("GET", "test1.txt", true);
    xmlhttp.send();
    

    open(method, url, async):规定请求的类型,URL 以及是否异步处理请求。

    • method:请求的类型;GET 或 POST
    • url:文件在服务器上的位置
      (该文件可以是任何类型的文件,比如 .txt 和 .xml;或者服务器脚本文件,比如 .asp 和 .php(在传回响应之前,能够在服务器上执行任务))
    • async:true(异步)或 false(同步)

    send(string) :将请求发送到服务器

    • string:仅用于 POST 请求

    GET 还是 POST?

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    为了得到的是缓存的结果,请向 URL 添加一个唯一的 ID。
    如果希望通过 GET 方法发送消息,请向 URL 添加信息。

    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader()来添加 HTTP 头。然后在 send()方法中规定你希望发送的数据。

    xmlhttp.open("post", "ajax-test.asp", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("fname = Bill & lname = Gates");
    

    setRequestHeader(header, value):向请求添加 HTTP 头。

    • header:规定头的名称
    • value:规定头的值

    异步—— True or false?

    通过 Ajax,JavaScript 无需等待服务器的响应,而是:

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

    JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或者缓慢,应用程序会挂起或停止。
    当使用 async = false 时,请不要编写onreadystatechange函数——把代码放到send()语句后面即可。

    用 JavaScript 写一个完整的 Ajax 代码并不复杂,但是需要注意:Ajax请求是异步执行的。


    服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseTextresponseXML 属性。
    responseText:获得字符串形式的响应数据

    • 如果来自服务器的响应并非 XML -> 使用 responseText 属性
    • responseText 属性返回字符串形式的响应

    responseXML:获得 XML 形式的响应数据

    • 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析 -> 使用 responseXML 属性。

    Ajax—— onreadystatechange 事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

    XMLHttpRequest 对象的三个属性:

    • onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    • readyState:存有 XMLHttpRequest 的状态。从0 到 4发生变化
      0:请求未初始化
      1:服务器连接已建立
      2:请求已接收
      3:请求处理中
      4:请求已完成,且响应已就绪
    • status:200:“OK”;404:未找到页面

    onreadystatechange 事件中,规定当服务器响应已做好被处理的准备时所执行的任务。

    readyState 等于4且状态为200时,表示响应已就绪。
    onreadystatechange 事件被触发5次(0~4),对应着 readyState 的每个变化。


    使用 callback 函数

    callback 函数是一种以参数形式传递给另一个函数的函数。
    如果你的网站上存在多个 Ajax 任务,那么你应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 Ajax 任务调用该函数。
    该函数调用应包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)。

    function myFunction() {
    	loadXMLDoc("ajax-info.txt", function() {
    		if (xmlhttp.readyState == 4 & xmlhttp.status == 200) {
    			document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    		}
    	});
    }
    


    jQuery Ajax - ajax()方法

    实例

    $(document).ready(function() {
    	$("#b01").click( function() {
    	htmlobj = $.ajax({ url:" /jquery/test1.txt", async: false});
    	$("#myDiv").html(html(htmlobj.responseText);
    	});
    });
    
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button id="b01" type="button">Change Context</button>
    

    定义和用法

    ajax() 方法通过 HTTP 请求加载远程数据。
    该方法是 jQuery 底层 Ajax 实现。简单易用的高层实现见 $.get$.post等。

    $.ajax()返回其创建 的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

    最简单的情况下,$.ajax()可以不带任何参数直接使用。

    注意: 所有的选项都可以通过$.ajaxSetup()函数来全局设置。

    语法
    jQuery.ajax([settings])
    
    参数描述
    settings可选。用于配置 Ajax 请求的键值对集合。
    可以通过$.ajaxSetup()设置任何选项的默认值。

    settings参数


    回调函数

    如果要处理$.ajax()得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。
    回调函数


    数据类型

    $.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型,比如 HTML,则数据就以文本形式来对待。

    通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML ,还可以指定 html、json、jsonp、script 或者text。

    其中, text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或者 responseHTML 属性传递给 success 回调函数。

    注意: 我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说,XML的话,服务器端就必须声明 text/ xml 或者 application/ xml 来获得一致的结果。

    • 如果指定为 html 类型,任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。
    • 类似地,指定 script 类型的话,也会先执行服务器端生成 JavaScript,然后再把脚本作为一个文本数据返回。
    • 如果指定为 json 类型,则会把获取到的数据作为一个 JavaScript 对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,它首先尝试使用 JSON.parse()。如果浏览器不支持,则使用一个函数来构建。

    JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。
    使用这种类型的话,会创建一个查询字符串参数callback=?,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。
    如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的 jsonp 参数。

    注意: JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。

    如果指定了 script 或者 jsonp 类型,那么当从服务器接收到数据时,实际上是用了 <script>标签而不是 XMLHttpRequest 对象。这种情况下,$.ajax()不再返回一个 XMLHttpRequest 对象,并且也不会传递事件处理函数,比如 beforeSend。


    发送数据到服务器

    默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

    data 选项既可以包含一个查询字符串,比如 key1=value1&key2=value2,也可以是一个映射,比如{key1: 'value1', key2: 'value2'}。如果使用了后者的形式,则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 contentType 选项的值,用其他合适的 MIME 类型来取代默认的 application/ x-www-form-urlencoded


    高级选项

    global 选项用于阻止响应注册的回调函数,比如 .ajaxSend,或者 ajaxError,以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在 ajaxSend 里禁用这个。

    如果服务器需要 HTTP 认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。

    Ajax 请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验。请求超时这个参数通常就保留其默认值,要不就通过 jQuery.ajaxSetup 来全局设定,很少为特定的请求重新设置 timeout 选项。

    默认情况下,请求总会被发出去,但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果,可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话,可以设置 ifModified 为 true。

    scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集,用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时,这特别好用。

    Ajax 的第一个字母是 asynchronous 的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。$.ajax()async 参数总是设置成true,这标志着在请求开始后,其他代码依然能够执行。强烈不建议把这个选项设置成 false,这意味着所有的请求都不再是异步的了,这也会导致浏览器被锁死。

    $.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象,但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了,但依然提供一个底层接口来观察和操控请求。比如说,调用对象上的 .abort() 可以在请求完成前挂起请求。

    展开全文
  • ajax

    万次阅读 多人点赞 2018-09-28 20:35:38
    1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行...

    1.1 什么是ajax:

    • Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。

     1.2Ajax的应用场景

    1.2.1 检查用户名是否已被注册:

    很多站点的注册页面都具被自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器进行数据交换,查询用户输入的用户名是否存在数据库。

     

    1.2.2 省市级联下拉框联动:

    很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现不同市区的选择,这就是最常

    展开全文
  • 课程为零基础学习开发的学员而准备,无需...JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等;新型前端开发大部分回归原始开发,核心编程能力非常重要,本课程教会你如何玩转前端。
  • springboot+ajax示例

    热门讨论 2016-08-02 15:48:08
    springboot+ajax的小例子,适合初学者,可以参考博文http://blog.csdn.net/oppo5630/article/details/52093898
  • PHP+ajax图片上传的简单实现。 使用js实现ajax,PHP上传图片成功以后返回图片的路径(弹窗出来)。 参考文档:http://blog.csdn.net/u014175572/article/details/51062856
  • 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课 讲究通俗易懂。通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQuery基础。针对目前很多学员 javaScript学得不够扎实的...
  • Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。
  • 注重版权,转载请注明原作者和原文链接 作者:码农BookSea ... ...Ajax 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,说的简单点就是Ajax可以实现局部刷新。(如百度地.
     
    

    在这里插入图片描述

    0.前言

    Ajax
    这个术语源自描述从基于 Web 的应用到基于数据的应用。
    Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
    使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
    Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
    Ajax可使因特网应用程序更小、更快,更友好。
    AJAX 工作原理
    Ajax 是一种独立于 Web 服务器软件的浏览器技术。 Ajax 基于下列 Web 标准:
    JavaScript、XML、HTML与 CSS 在 Ajax 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。Ajax 应用程序独立于浏览器和平台。
    Web 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开发。
    不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。通过 Ajax,因特网应用程序可以变得更完善,更友好。

    1.认识Ajax

    在这里插入图片描述
    Ajax = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
    Ajax 不是新的编程语言,而是一种使用现有标准的新方法。
    Ajax 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,说的简单点就是Ajax可以实现局部刷新。
    举个栗子:
    (如百度地图就应用了Ajax,查询地点时,不用刷新整个百度地图页面,只更新有需要的地方。这就叫做局部刷新)

    2.使用Ajax的好处

    1.无刷新——不刷新整个页面,只刷新局部。
     无刷新的好处
     只更新部分页面,有效利用带宽
     提供连续的用户体验
     提供类似 C/S 的交互效果,操作更方面

    2.异步与服务器通信
      使用异步的方式与服务器通信,不打断用户的操作
      
    3.前端与后端负载均衡
      将一些后端的工作移到前端,减少服务器与带宽的负担
      
    4.基于规范被广泛支持
      不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。
      
    5.界面与应用分离
      Ajax使得界面与应用分离,也就是数据与呈现分离

    3.Ajax的工作原理

    Ajax的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
    在这里插入图片描述(图片转载至:https://www.runoob.com/ajax/ajax-intro.html)


    Ajax首先会向服务端发送一个请求,然后调用一个服务(回调函数),接着返回结果。这样使客户端和服务端发生了少量的数据交换,ajax实现局部页面的更新,从而减少了服务端的压力。
    在这里插入图片描述

    4.传统 Web 与 Ajax 的差异

    在这里插入图片描述


    实现 Ajax 的过程分为发送请求和处理响应两个步骤:

    1. 发送请求分为 GET 和 POST 方法。
    2. 响应有 responseText 和 responseXML 两种方式。

    5.Ajax–JavaScript实现

    在这里插入图片描述
    在这里插入图片描述
     Get方式-Demo:

    Get方式
    
    window.onload=function()
    {
        document.getElementById("ok").onclick=function(){
            var xhr=createXmlHttpRequest();//获取XmlHttpRequest对象
            
            xhr.onreadystatechange=function(){//回调函数
                if(xhr.readyState==4){//回调状态
                    if(xhr.status==200 || xhr.status==304)//服务器状态吗
                    {
                        var date=xhr.responseText;//服务器返回数据
                        alert(date);
                    }
                }
            };
            var id="A001";
            alert(id);
            xhr.open("GET","../testGetServelet?id="+id,true);//1、发送方式2、页面路径,3、请求是否异步,默认为true
            xhr.send(null);//发送数据--get方式,这里不用写数据,即使写了数据服务器端也无法接收
        };
        
        function createXmlHttpRequest(){
               var xmlHttp;
               try{    //Firefox, Opera 8.0+, Safari
               xmlHttp=new XMLHttpRequest();
                }catch (e){
                       try{    //Internet Explorer
                      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                       }catch (e){
                          try{
                              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                          }catch (e){}  
               }
        }
       return xmlHttp;
     }
    
    };
    

    Post方式-Demo:

    Post方式
    
    window.onload=function(){
        document.getElementById("ok").onclick=function(){
            var xhr=createXmlHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4)
                {
                    if(xhr.status==200 || xhr.status==304)
                    {
                        var data=xhr.responseText;
                        alert(data);
                    }
                }
            };
    
            xhr.open("post","../testGetServelet",true);
            //如果是POST请求方式,设置请求首部信息
             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
             xhr.send("a=1&b=2");
        };
    
        function createXmlHttpRequest(){
               var xmlHttp;
               try{    //Firefox, Opera 8.0+, Safari
               xmlHttp=new XMLHttpRequest();
                }catch (e){
                       try{    //Internet Explorer
                      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                       }catch (e){
                          try{
                              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                          }catch (e){}
               }
        }
       return xmlHttp;
     }
    
    };
    

    讲完JS实现Ajax 接下来讲讲JQ实现Ajax

    6.Ajax–jquery实现

    使用 javascript 实现 ajax 有很多缺点…方法、属性、常用值较多不好记忆,步骤
    繁琐,浏览器兼容问题。
    jQuery 提供了一些常用的 ajax 方法: . a j a x ( ) 、 .ajax()、 .ajax().get() 、 . p o s t ( ) 、 .post()、 .post().getJSON()、
    load()。相比 js 实现,更加简洁和方便。

    $.ajax()实现 Ajax 示例代码:

    <script src="script/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript">
    function validate() {
    var uname = $("#uname").val();
    if (uname == null || uname == "") {
    $("#msg").html("用户名不能为空!");
    } else {
    $.ajax({
    url : "dologin.jsp",
    type : "get",
    data:{"uname":uname},
    dataType : "text",
    success : function(result) {
    if ($.trim(result) == "true") {
    $("#msg").html("用户名已被使用!");
    } else {
    $("#msg").html("用户名可以使用!");
    }
    },
    error : function() {
    alert("用户名验证拾出现错误,请联系管理员!");
    }
    });
    }
    };
    </script>
    

    $.get()
    语法格式:

    $.get(url ,data,success(resp,status,xhr), dataType);
    怕大家看不懂参数是什么意思,给大家放张常用属性参数表,看了之后一目了然:
    在这里插入图片描述
    在这里插入图片描述

    <script src="script/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript">
    function validate(){
    var uname = $("#uname").val();
    if(uname==null || uname==""){
    $("#unameDiv").html("用户名不能为空!");
    }else{
    $.get('dologin.jsp','uname='+uname,function(result){
    if($.trim(result) == "true"){
    $("#unameDiv").html("用户名已被使用!");
     }else{
    $("#unameDiv").html("用户名可以使用!");
     } 
    }
    );
    } }
    </script> <body> <form action="" id="form1"> <table> <tr><td>用 户 名:</td> <td><input type="text" name="uname" id="uname"
    onblur="validate();" />&nbsp;<font
    color="#c00fff">*</font></td> <td><div id="unameDiv" style="display: inline"></div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    

    $.post()

    语法格式:
    $.post(url,data,success(resp,status,xhr), dataType);
    (实现方式与get类似,只是把get改换成post,这里不再赘述~~)
    在这里插入图片描述
    load()

    语法格式:
    $(selector).load(url ,data,function(result, status, xhr));

    <script type="text/javascript">
    function validate(){
    var uname = $("#uname").val();
    if(uname==null || uname==""){
    $("#unameDiv").html("用户名不能为空!");
    }else{
    $("#unameDiv").load('lgoin.jsp','uname='+uname);
    } }
    </script> <body> <form action="" id="form1" > <table> <tr><td>用 户 名:</td> <td>
    <input type="text" name="uname" id="uname"
    onblur="validate();" />&nbsp;<font color="#c00fff">*</font>
    </td> <td><div id="unameDiv" style="display: inline"></div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    

    今天Ajax相关知识就先讲到这里吧~~

    以上就是本篇文章的有关内容

    骚等别划走,恰饭时间~
    在这里插入图片描述

    给大家放波福利,博主最近在搞阿里云推广,

    活动折扣价:全网最低价87元/年,261元/3年,比学生9.9每月还便宜(舒服的一匹)
    新用户可以入手试试,有一台属于自己的服务器,前期用来部署和学习都很方便

    阿里云 【点击购买
    在这里插入图片描述

    各位看官老爷。要是觉得看了之后有收获,感觉写的有点东西,劳烦点个免费的赞鼓励一下博主

    白嫖不好,创作不易。各位的点赞就是我创作的最大动力,如果我有哪里写的不对,欢迎评论区留言进行指正,我们下篇文章见!

    在这里插入图片描述

    展开全文
  • 对Echarts3.0的基本图表实现,即饼图,折线图,柱状图。 从数据库读取数据显示在前台,图表可根据数据库数据实时更新。
  • 该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo,简单易懂,可以参考博客:http://blog.csdn.net/mockingbirds/article/details/46842327
  • ajax操作json数组,实现局部刷新

    热门讨论 2015-11-05 15:44:10
    自己写的一个demo,利用ajax回调php返回的json数据,并实现页面的局部刷新,方便大家学习使用,
  • AJAX

    千次阅读 2019-08-04 10:49:43
    AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法,与服务器交换数据并更新部分网页的新技术(不用重新加载整个界面)。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与...

    AJAX

    AJAX 不是一种新的编程语言而是一种使用现有标准的新方法,与服务器交换数据并更新部分网页的新技术(不用重新加载整个界面)。

    AJAX = 异步JavaScript和xml。

    1.创建AJAX对象

    XMLHttpRequest 对象用于在后台与服务器交换数据

    var xhr = new XMLHttpRequest();
    

    老版本的ie

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

    用来兼容老版本ie和新版本浏览器的xhr对象

    var xhr 
    if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()
    }else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    

    2. AJAX请求

    方法:

    open(method,url,async)						规定请求的类型、URL 以及是否异步处理请求
    											method:请求的类型;GET 或 POST
    											url:文件在服务器上的位置
    											async:true(异步)或 false(同步)
    
    send(string)
    						  					将请求发送到服务器。
    											string:仅用于 POST 请求
    

    setRequestHeader(header,value); 向请求添加http头,header:规定头的名称;value:规定头的值。

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true

    3.AJAX服务器响应

    responseTest			获得字符串形式的响应数据
    reponseXML				获得XML行营的响应数据
    

    4.事件

    onreadystatechange		 存储函数,当readyState属性改变时,就会调用该函数
    readyState				 存有xhr的状态,有5个参数:
    														0:请求未初始化
    														1:服务器连接已建立
    														2:请求已接受
    														3:请求处理中
    														4:请求已完成,且响应已就绪
    													
    status					200: " Ok "  ; 404未找到界面
    		
    
    展开全文
  • Ajax实现局部刷新

    万次阅读 多人点赞 2021-03-01 23:30:13
    ajax的两种请求方式前言一、 Ajax是什么?二、实现方式:1.原生的JS实现方式(了解)2.JQeury实现方式 前言 最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有...
  • ajax 设置Access-Control-Allow-Origin实现跨域访问

    千次下载 热门讨论 2015-06-06 19:19:29
    ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET。如果...
  • PHP+Ajax点击加载更多内容

    热门讨论 2015-08-09 11:54:17
    PHP+Ajax点击加载更多内容,适用于手机端和web端。
  • Ajax请求的五个步骤

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

    千次下载 热门讨论 2011-10-21 16:53:02
    Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包
  • Shiro和AJAX完美整合

    热门讨论 2013-09-21 08:27:04
    Shiro和AJAX完美整合
  • 通过页头生成Token,进行请求验证,解决Ajax请求安全问题。目前为止我做的最多的防止ajax请求攻击的就是添加验证码、添加随机Token,限制同一请求在规定时间内的最大请求数量、服务器端校验数据正确性、尽量使用POST...
  • ajax详细用法

    万次阅读 多人点赞 2019-07-30 17:27:55
    1、首先让我们了解ajax----------------        通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某...
  • springMVC+ajax+json

    千次下载 热门讨论 2014-01-12 18:28:56
    使用springMVC+ajax+json的一个小demo,希望对读者有用
  • 什么是AJAX

    万次阅读 多人点赞 2019-05-17 09:44:50
    这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 ...传统的网页(不使用 AJAX)如果需要更新内容,必需重载整...
  • jQuery-Ajax(详解)

    千次阅读 多人点赞 2020-05-30 14:25:04
    Ajax方法需要与Web服务器端进行交互,需要有环境才可正常使用,安装环境的工具包有很多,可以选择自行下载。 jQuery中的Ajax 在jQuery中,$.Ajax()方法属于最底层的方法,第2层是load(),$.get(),和$.post(),第3...
  • XMLHttpRequest和Ajax

    千次阅读 2019-04-01 12:57:46
    XMLHttpRequest和Ajax的关系 ajax是一种技术方案,但并不是一种新技术。 ajax最核心的依赖是浏览器提供的XMLHttpRequest对象。 所以我用一句话来总结两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求 ...
  • Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例

    千次下载 热门讨论 2015-07-23 17:18:04
    Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例,具体过程和效果看博文:http://blog.csdn.net/evankaka/article/details/47023975
  • Python爬虫4.2 — ajax(动态网页数据抓取)用法教程

    千次阅读 多人点赞 2019-10-18 10:18:37
    Python爬虫4.2 — ajax[动态网页数据]用法教程综述AJAX 介绍什么是AJAX实例说明请求分析获取方式实例说明其他博文链接 综述 本系列文档用于对Python爬虫技术的学习进行简单的教程讲解,巩固自己技术知识的同时,万...
  • 详解前端应用开发中涉及的Ext JS/jQuery/XMLHttpRequest等技术,将Ajax融入轻量级Java EE开发,深入介绍Ajax+Java EE整合开发的方法和步骤,对实际开发具有极好的指导意义。
  • JS原生Ajax和jQuery的Ajax与代码示例

    万次阅读 多人点赞 2018-08-26 20:38:57
    JS原生Ajax和jQuery的Ajax 【学习目标】 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 4,使用Ajax实现特效 实现异步验证用户名是否存在 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 868,386
精华内容 347,354
关键字:

ajax