精华内容
下载资源
问答
  • ajax使用方法

    千次阅读 2019-05-21 21:21:19
    ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象...$.ajax使用方法 常用参数: 1、url 请求地址 2、type 请求方式,默认是’GET’,常...

    ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。jquery将它封装成了一个函数$.ajax(),我们可以直接用这个函数来执行ajax请求。

    ajax需要在服务器环境下运行。

    $.ajax使用方法
    常用参数:
    1、url 请求地址
    2、type 请求方式,默认是’GET’,常用的还有’POST’
    3、dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’html’
    4、data 设置发送给服务器的数据
    5、success 设置请求成功后的回调函数
    6、error 设置请求失败后的回调函数
    7、async 设置是否异步,默认值是’true’,表示异步

    demo

    $.ajax({
        url: '/change_data',
        type: 'GET',
        dataType: 'json',
        data:{'code':300268}
    })
    .done(function(dat) {
        alert(dat.name);
    })
    .fail(function() {
        alert('服务器超时,请重试!');
    });
    

    $.ajax按照请求方式可以简写成$.get或者$.post方式

    $.get("/change_data", {'code':300268},
      function(dat){
        alert(dat.name);
    });
    
    $.post("/change_data", {'code':300268},
      function(dat){
        alert(dat.name);
    });
    

    ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。

    数据接口

    数据接口是后台程序提供的,它是一个url地址,访问这个地址,会对数据进行增、删、改、查的操作,最终会返回json格式的数据或者操作信息,格式也可以是text、xml等。

    demo:请求搜索接口

    <!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>Document</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function () {
                // 展示数据
                $('input').keyup(function () {
                    // 得到用户输入
                    var vals = $(this).val()
                    var str = ''
                    $.ajax({
                        url: 'https://sug.so.360.cn/suggest',
                        type: 'get',
                        dataType: 'jsonp',
                        data: { 'word': vals ,"encode":'UTF-8'}
                    })
                        .done(function (dat) {
                            console.log(dat)
                            for (var i = 0; i < dat.s.length; i++) {
                                str += '<li>' + dat.s[i] + '</li>'
                            }
                            $('ul').html(str)
                        })
                })
            })
        </script>
    </head>
    
    <body>
        
        <input type="text">
        <ul></ul>
    </body>
    
    </html>
    

    exit(?)

    展开全文
  • 本文主要总结整理ajax使用方法背景知识点的详细解析,以及ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通过本文能够作为一个ajax的查找资料,...

    写在前面:

    本文主要总结整理ajax使用方法背景知识点的详细解析,以及ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通过本文能够作为一个ajax的查找资料,不懂ajax?看这篇文章就可以了。

    ajax简介:

    • ajax 的全称是Asynchronous JavaScript and XML,意思是:异步 JavaScript 和 XML
    • ajax是使用XMLHttpRequest对象与服务器端通信的脚本语言
    • 可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。
    • AJAX可以无需刷新页面而与服务器端进行通信。
    • 允许你根据用户事件来更新部分页面内容。

    ajax工作原理:

    Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。把这些交给了Ajax引擎,用户操作起来也就感觉更加流畅了。

    ajax的优点:

    1. 页面无刷新,用户体验好。

      • AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。
    2. 异步通信,更加快的响应能力。

      • AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。
    3. 减少冗余请求,减轻了服务器负担

      • AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。
    4. 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序

      • AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。
    5. 界面与应用分离。
      • Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

    ajax应用场景:

    • 数据验证。用户的注册,登录功能,通过与后台交互数据,进行数据验证
    • 按需取数据。按照需求,展示所需要的部分数据,而不是一股脑的将整个网页全都展示出来。
    • 自动更新页面。栗子:百度搜索的提示,出现联想提示语,展示用户最有可能搜索的词汇。
    • 自动更新页面。栗子:在线聊天室,设置一个定时器,每隔几秒向请求数据,实时更新页面信息。

    同步执行和异步执行。

    javascript同步表示sync,指的就是:代码依次执行。javascript 异步表示async,指:代码执行不按顺序,可以这么理解:同步是在一条直线上的队列,异步不在一个队列上 各走各的。javascript所谓的“线程”,就是这样的一种概念。

    虽然异步执行可以实现多任务并行执行,使执行的效率大大提高,但是异步执行也会占用浏览器的性能,不要胡乱的使用异步执行。

    举个栗子:在负荷很重的客户/服务器系 统中,时间延迟频繁且漫长,在这种环境下就比较适宜宜采用异步执行模式。

    关于同步和异步,大概只能说这些,有兴趣的朋友可以自己深入了解一下。


    开始一个ajax请求需要了解的背景知识:

    XMLHttpRequest对象:

    Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成,下面我们就来聊一聊XMLHttpRequest对象是什么鬼?拥有哪些属性、方法,这些都是用来干什么的,这对于我们系统性的了解ajax请求是非常有帮助的。

    XMLHttpRequest对象的属性:

    XMLHttpRequest对象的属性

    XMLHttpRequest对象的方法:

    XMLHttpRequest对象的方法

    XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均支持 XMLHttpRequest 对象。,XMLHttpRequest对象的使用方式极其简单,先不要懵逼。继续往下看。

    ajax的跨域请求由哪些部分组成的

    • HTTP请求的方法或动作,ajax请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
    • 需要请求的URL,总得告诉服务器请求的地址是什么吧?
    • 请求头,包含一些客户端环境信息,身份验证信息等
    • 请求体,也就是请求正文,请求正文中可以包含客户端提交的查询字符串信息,表单信息等等.

    GET和POST两种请求方式对比:

    在前后端分离的情况下,对于前端的小伙伴来说,一般是后端选择请求接口,请求方式,让我们去使用,所以请求方式的选择这点,稍微了解一下即可。

    ajax的跨域请的回复:http响应:

    • 一个数字和文字组成的状态码,用来显示请求是成功还是失败
    • 响应头,响应头和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等.
    • 响应体,也就是响应正文.

    服务器端返回的:常见的HTTP状态码

    关于http的状态码还有非常多,不止上图这点这么简单,有兴趣的可以看本人之前写的一篇文章:http状态码详解


    如何使用ajax

    本文中的栗子采用菜鸟教程ajax的栗子:ajax实例

    实现ajax的四个步骤:

    1. 新建一个XMLHttpRequest对象。
    2. open方法表示初始化请求,此时并没有发送。
    3. 定义数据返回后的回调函数,里面的代码在readystatechange值改变的时候执行。
    4. 发送请求。

    使用ajax的一个栗子,里面注释的也较为详细:

    function loadXMLDoc()
    {//点击事件
      var xmlhttp;
      if (window.XMLHttpRequest)
      {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     //1、上面是创建XMLHttpRequest对象
      xmlhttp.open("POST","/try/ajax/demo_post2.php",true);// 2、open方法表示初始化请求,此时并没有发送。
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      xmlhttp.send("fname=Henry&lname=Ford");//4、发送请求
      xmlhttp.onreadystatechange=function();
      {//3、当参数被传入服务器的时候,引用监听事件。
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        //判断readyState四种状态,当执行四步完成之后,并且返回的是200(成功)
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    }

    1、新建一个XMLHttpRequest对象:

    XMLHttpRequest对象在上文介绍了他的属性和方法,如上所述, Ajax的核心是XMLHttpRequest对象,这一步是必不可少的,下面就是它的使用语法。

    var xmlhttp = new XMLHttpRequest();//没看错,就是这么简单

    ajax兼容IE7以下:

    XMLHttpRequest对象是IE7才开始支持的,老版本IE5和IE6使用的是ActiveX 对象,使用方式是一样的,区别在于要创建不同的对象。如果要兼容IE5和IE6只需判断浏览器中是否存在XMLHttpRequest对象。

    var xmlhttp;
      if (window.XMLHttpRequest)//检查是否有XMLHttpRequest对象
      {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

    2、open方法表示初始化请求,此时并没有发送。

    open方法的语法open(method,url,async)

    1. 参数一:method——请求方式,get或者post。(默认为get)
    2. 参数二:url——请求路径,文件在服务器上的位置
    3. 参数三:async——true:异步请求。false:同步请求。(默认为true,异步请求。)

    3.定义数据返回后的回调函数,里面的代码在readystatechange值改变的时候执行。

    触发ajax的时候,XMLHttpRequest 的状态会不断变化,这个值就存在readyState属性中。

    readyState属性:

    readyState只有5个值{0,1,2,3,4},只读不能写。

    0: XMLHttpRequest对象创建完成。————还没有调用open()方法

    1: XMLHttpRequest对象初始化完成。——————已调用send()方法,正在发送请求

    2: 请求已经发送。——————send()方法完成,已经收到全部响应 内容

    3: 服务器已经返回了数据(但是还没有被解析,可能只一段http报文)。————正在解析响应内容

    4: 数据解析已经完成。————响应内容解析完成,可以在客户端调用了

    数据解析完成之后会返回一个http的状态码,通过XMLHttpRequest.status获得该值,判断是否为200,判断是否请求成功

    onreadystatechange事件:

    每当readyState属性值改变时,就会触发 onreadystatechange 事件。——通过监听onreadystatechange事件,来判断请求的状态。

    4、发送请求

    1. send()方法必须在open()之后。
      • 在使用GET方式请求时无需填写参数
      • 在使用POST方式时需要使用setRequestHeader()来添加http头,然后在 send() 方法中规定您希望发送的数据

    get:

    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();

    post:

      xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      xmlhttp.send("fname=Henry&lname=Ford");

    菜鸟教程的栗子:get方式post方式

    写在后面:

    想到当初自己不会ajax的时候,畏ajax如洪水猛兽,希望小伙伴们,看了本文就能写出自己的第一个ajax来,这也是我想写这篇文章的意义所在。十多天没写文了,这篇文章也准备了好几天,写的不好之后,欢迎指正,谢谢。

    最后:如需转载,请放上原文链接并署名。码字不易,感谢支持!因为我经常看不懂别人写的分享,所以个人写文比较偏小白,写的不好之处,欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我。
    ps:目前待业,坐标北京,本人适应互联网快节奏,高强度,持续学习,持续成长,认真,严谨,学习积极性强。中小公司大佬求带走,邮箱:obkoro1@foxmail.com。
    掘金个人主页

    参考资料:

    Ajax与数据传输

    Ajax入门(一)从0开始到一次成功的GET请求

    Ajax 总结篇

    菜鸟教程——AJAX 教程

    以上。2017.6.1

    展开全文
  • jQuery ajax使用方法

    千次阅读 2019-05-13 10:14:11
    ajax使用方式 type: 默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET" url: 默认值: 当前页地址。发送请求的地址。 data: 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 ...

    ajax使用方式

    type: 默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"

    url: 默认值: 当前页地址。发送请求的地址。

    data: 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 必须为 Key/Value 格式

    contentType: 发送信息至服务器时内容编码类型。

    dataType: 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断

    success: 请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

    1.传递指定参数

    $.ajax({
    
        type: 'post',
    
        url: '/operate/getNewsBynew_id',
    
        data:{"new_id":data.new_id},
    
        success: function (data) {
    
    }
    
      
    
    });
    
    

    2.传递json对象

         $.ajax({
                        type: 'post',
                        url: '/news/addnews',
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(data.field),
                        success: function (data) {
                          
                                location.href="/gover_index_1.html"
                        
                        }
                    }
                );

    3.后台接受数据处理并返回结果

     

    @PostMapping("/addnews")
    public News addNews(@RequestBody News news){
        news.setTime(new Date());
       newsService.insertNews(news);
        return news;
    }

     

    @PostMapping("/getNewsBynew_id")
    public NewsAll getNews(Integer new_id){
        NewsAll newsAll=newsService.getNewsBynew_id(new_id);
        System.out.println(newsAll.getS_times()+" "+newsAll.getTitle());
        return newsAll;
    }

     

    4.返回的结果用console.log输出

    展开全文
  • Ajax技术使用方法

    千次阅读 2018-04-11 10:03:05
    Ajax不是一种新的编程语言,而是使用现有标准的新方法AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地...

    ajax简介

     

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

    Ajax包括:

    • XHTML和CSS
    • 使用文档对象模型(Document Object Model)作动态显示和交互
    • 使用XML和XSLT做数据交互和操作
    • 使用XMLHttpRequest进行异步数据接收

    利用AJAX可以做:

    • 注册时,输入用户名自动检测用户是否已经存在。
    • 登陆时,提示用户名密码错误
    • 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
    • ajax伪造

      iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。

      因此,iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。

      <!DOCTYPE html>
      <html>
          <head lang="en">
              <meta charset="UTF-8">
              <title>伪造AJAX</title>
          </head>
          <body>
              <div>
                  <p>请输入要加载的地址:<span id="currentTime"></span></p>
                  <p>
                      <input id="url" type="text" />
                      <input type="button" value="提交" onclick="LoadPage();">
                  </p>
              </div>
              <div>
                  <h3>加载页面位置:</h3>
                  <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
              </div>
              <script type="text/javascript">
                  window.onload= function(){
                      var myDate = new Date();
                      document.getElementById('currentTime').innerText = myDate.getTime();
       
                  };
                  function LoadPage(){
                      var targetUrl =  document.getElementById('url').value;
                      document.getElementById("iframePosition").src = targetUrl;
                  }
              </script>
          </body>
      </html>
       

      原理是这样的,设置一个提交按钮,再设置一个输入框,当我们输入一个网址的时候,在当前的页面加载输入网址的页面信息,呈现在iframe框里,这样就能做到不刷新URL来提交不同的信息。

      原生ajax

       Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

      一、XMLHttpRequest对象

      Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

      XHR的主要方法有:

       
      1. void open(String method,String url,Boolen async)   
         用于创建请求    
         参数:
             method: 请求方式(字符串类型),如:POST、GET、DELETE...
             url:    要请求的地址(字符串类型)
             async:  是否异步(布尔类型)
       
      2. void send(String body)
          用于发送请求
          参数:
              body: 要发送的数据(字符串类型) 
      
      3. void setRequestHeader(String header,String value)
          用于设置请求头
          参数:
              header: 请求头的key(字符串类型)
              vlaue:  请求头的value(字符串类型)
       
      4. String getAllResponseHeaders()
          获取所有响应头
          返回值:
              响应头数据(字符串类型)
       
      5. String getResponseHeader(String header)
          获取响应头中指定header的值
          参数:
              header: 响应头的key(字符串类型)
          返回值:
              响应头中指定的header对应的值
       
      6. void abort()
          终止请求
       

      XHR的主要属性有:

       
      1. Number readyState
         状态值(整数),可以确定请求/响应过程的当前活动阶段
      • 0:未初始化。未调用open()方法
      • 1:启动。已经调用open()方法,未调用send()方法
      • 2:发送。已经调用send()方法,未接收到响应
      • 3:接收。已经接收到部分数据
      • 4:完成。已经接收到全部数据,可以在客户端使用
      2. Function onreadystatechange                当readyState的值改变时自动触发执行其对应的函数(回调函数)
      
      
      3. String responseText                        作为响应主体被返回的文本(字符串类型)
      
      4. XmlDocument responseXML                    服务器返回的数据(Xml对象) 
      
      5. Number states                              状态码(整数),如:200、404... 
      
      6. String statesText                          状态文本(字符串),如:OK、NotFound...
       

       二、get请求

      GET用于向服务器查询某些信息:

       
      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
      
          <h1>XMLHttpRequest - Ajax请求</h1>
          <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
      
          <script src="/statics/jquery-1.12.4.js"></script>
          <script type="text/javascript">
      
              function GetXHR(){
                  var xhr = null;
                  if(XMLHttpRequest){
                      xhr = new XMLHttpRequest();
                  }else{
                      xhr = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  return xhr;
              }
              function XmlGetRequest(){
                  var xhr = GetXHR();
                  // 定义回调函数
                  xhr.onreadystatechange = function(){
                      if(xhr.readyState == 4){
                          // 已经接收到全部响应数据,执行以下操作
                          var data = xhr.responseText;
                          console.log(data);
                      }
                  };
                  // 指定连接方式和地址----文件方式
                  xhr.open('get', "/test/", true);
                  // 发送请求
                  xhr.send();
              }
          </script>
      </body>
      </html>
       

      三、post请求

      POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据,而且格式不限。

       
      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title>POST</title>
      </head>
      <body>
      
          <h1>XMLHttpRequest - Ajax请求</h1>
          <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />
      
          <script src="/statics/jquery-1.12.4.js"></script>
          <script type="text/javascript">
      
              function GetXHR(){
                  var xhr = null;
                  if(XMLHttpRequest){
                      xhr = new XMLHttpRequest();
                  }else{
                      xhr = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  return xhr;
              }
              function XmlPostRequest(){
                  var xhr = GetXHR();
                  // 定义回调函数
                  xhr.onreadystatechange = function(){
                      if(xhr.readyState == 4){
                          // 已经接收到全部响应数据,执行以下操作
                          var data = xhr.responseText;
                          console.log(data);
                      }
                  };
                  // 指定连接方式和地址----文件方式
                  xhr.open('POST', "/test/", true);
                  // 设置请求头
                  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
                  // 发送请求
                  xhr.send('n1=1;n2=2;');
              }
          </script>
      </body>
      </html>
       

      jquery ajax

      jQuery 提供多个与 AJAX 有关的方法。

      通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

      • jQuery 不是生产者,而是大自然搬运工。
      • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 

      注:2.+版本不再支持IE9以下的浏览器

       
      1. jQuery.get(...)
             所有参数:
                    url: 待载入页面的URL地址
                   data: 待发送 Key/value 参数。
                success: 载入成功时回调函数。
               dataType: 返回内容格式,xml, json,  script, text, html
      
      2.jQuery.post(...)
             所有参数:
                    url: 待载入页面的URL地址
                   data: 待发送 Key/value 参数
                success: 载入成功时回调函数
               dataType: 返回内容格式,xml, json,  script, text, html
      
      3.jQuery.getJSON(...)
             所有参数:
                    url: 待载入页面的URL地址
                   data: 待发送 Key/value 参数。
                success: 载入成功时回调函数。
      
      4.jQuery.getScript(...)
             所有参数:
                    url: 待载入页面的URL地址
                   data: 待发送 Key/value 参数。
                success: 载入成功时回调函数。
      
      5.jQuery.ajax(...)
             部分参数:
                    url:请求地址
                   type:请求方式,GET、POST(1.9.0之后用method)
                headers:请求头
                   data:要发送的数据
            contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                  async:是否异步
                timeout:设置请求超时时间(毫秒)
             beforeSend:发送请求前执行的函数(全局)
               complete:完成之后执行的回调函数(全局)
                success:成功之后执行的回调函数(全局)
                  error:失败之后执行的回调函数(全局)
                accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
               dataType:将服务器端返回的数据转换成指定类型
                  "xml": 将服务器端返回的内容转换成xml格式
                 "text": 将服务器端返回的内容转换成普通文本格式
                 "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
               "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
                 "json": 将服务器端返回的内容转换成相应的JavaScript对象
                "jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
       

      写一个最简单的例子:

       
      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
          <p>
              <input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
          </p>
          <script type="text/javascript" src="jquery-1.12.4.js"></script>
          <script>
              function JXmlSendRequest(){
                  $.ajax({
                      url: "http://c2.com:8000/test/",    // 访问url地址
                      type: 'GET',                        // get方式提交
                      dataType: 'text',            // 数据类型
                      success: function(data, statusText, xmlHttpRequest){  // 成功后返回的结果
                          console.log(data);
                      }
                  })
              }
          </script>
      </body>
      </html>
       

      跨域ajax

      由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的,通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

      浏览器同源策略并不是对所有的请求均制约:

      • 制约: XmlHttpRequest
      • 不制约: img、iframe、script等具有src属性的标签

      注:自己模拟跨域,需要现在自己电脑的host文件里面添加两条域名,我这里添加的是zhangyanlin.com和aylin.com这两个域名

      一、JSONP实现跨域请求

      JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。jsonp只能通过get方式进行跨域请求

       
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <input  type="button" value="Ajax" onclick="DoAjax();"/>
          <input  type="button" value="JsonpAjax" onclick="JsonpAjax();"/>
      
          <script src="/statics/jquery-1.12.4.js"></script>
          <script src="http://aylin.com:8002/statics/jquery.cookie.js"></script>
          <script>
              function func(arg) {
                  console.log(arg);  // 输出结果就是python代码给传过来的列表[11,22,33,]
              }
              function DoAjax() {
                  $.ajax({
                      url: 'http://alex.com:8002/index',
                      type: 'POST',
                      data: {'k1': 'v1'},
                      success: function (arg) {
                          console.log(arg);
                      }               
                  });
              }
              function JsonpAjax() {
      //            var tag = document.createElement('script');
      //            tag.src = "http://alex.com:8002/index";
      //            document.head.appendChild(tag);
      //            document.head.removeChild(tag);
                  $.ajax({
                      url: "http://aylin.com:8002/index",
                      dataType: 'jsonp',
                      jsonpCallBack: 'func'   // 对端给返回函数名,函数接收的参数是内容
                  })
              }
          </script>
      </body>
      </html>
       

      aylin.com域名这边可以给定义函数

       
      # 采用pythontornado框架来进行的
      class IndexHandler(tornado.web.RequestHandler):
          def get(self):
              self.write('func([11,22,33]);')
          def post(self, *args, **kwargs):
              self.write('t2.post')
       

      在这里jsonp就采用script标签的src来进行跨域请求的

       二、CORS

      上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输,那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候,对方已经收到,但是在返回的时候被浏览器给阻挡,我们可以写一串类似于身份证的字符串,通过浏览器的预检,从而达到数据的传输。

      这方面分为简单请求和非简单请求

       
      条件:
          1、请求方式:HEAD、GET、POST
          2、请求头信息:
              Accept
              Accept-Language
              Content-Language
              Last-Event-ID
              Content-Type 对应的值是以下三个中的任意一个
                                      application/x-www-form-urlencoded
                                      multipart/form-data
                                      text/plain
       
      注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求
       

      简单请求只一次请求,而复杂请求是两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

      基于cors实现AJAX请求:

      1、支持跨域,简单请求

      服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
      
          <p>
              <input type="submit" onclick="XmlSendRequest();" />
          </p>
      
          <p>
              <input type="submit" onclick="JqSendRequest();" />
          </p>
      
          <script type="text/javascript" src="jquery-1.12.4.js"></script>
          <script>
              function XmlSendRequest(){
                  var xhr = new XMLHttpRequest();
                  xhr.onreadystatechange = function(){
                      if(xhr.readyState == 4) {
                          var result = xhr.responseText;
                          console.log(result);
                      }
                  };
                  xhr.open('GET', "http://c2.com:8000/test/", true);
                  xhr.send();
              }
      
              function JqSendRequest(){
                  $.ajax({
                      url: "http://c2.com:8000/test/",
                      type: 'GET',
                      dataType: 'text',
                      success: function(data, statusText, xmlHttpRequest){
                          console.log(data);
                      }
                  })
              }
      
      
          </script>
      </body>
      </html>
       
      class MainHandler(tornado.web.RequestHandler):
          def get(self):
              self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
              self.write('{"status": true, "data": "seven"}')

      2、支持跨域,复杂请求

      由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

      • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
      • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
      • “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age
       
      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
      
          <p>
              <input type="submit" onclick="XmlSendRequest();" />
          </p>
      
          <p>
              <input type="submit" onclick="JqSendRequest();" />
          </p>
      
          <script type="text/javascript" src="jquery-1.12.4.js"></script>
          <script>
              function XmlSendRequest(){
                  var xhr = new XMLHttpRequest();
                  xhr.onreadystatechange = function(){
                      if(xhr.readyState == 4) {
                          var result = xhr.responseText;
                          console.log(result);
                      }
                  };
                  xhr.open('PUT', "http://aylin.com:8000/test/", true);
                  xhr.setRequestHeader('k1', 'v1');
                  xhr.send();
              }
      
              function JqSendRequest(){
                  $.ajax({
                      url: "http://aylin.com:8000/test/",
                      type: 'PUT',
                      dataType: 'text',
                      headers: {'k1': 'v1'},
                      success: function(data, statusText, xmlHttpRequest){
                          console.log(data);
                      }
                  })
              }
          </script>
      </body>
      </html>
       
      class MainHandler(tornado.web.RequestHandler):
          
          def put(self):
              self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
              self.write('{"status": true, "data": "seven"}')
      
          def options(self, *args, **kwargs):
              self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
              self.set_header('Access-Control-Allow-Headers', "k1,k2")
              self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
              self.set_header('Access-Control-Max-Age', 10)
       

      3、跨域传输cookie

      在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

      如果想要发送:

      • 浏览器端:XMLHttpRequest的withCredentials为true
      • 服务器端:Access-Control-Allow-Credentials为true
      • 注意:服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *
       
      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
      
          <p>
              <input type="submit" onclick="XmlSendRequest();" />
          </p>
      
          <p>
              <input type="submit" onclick="JqSendRequest();" />
          </p>
      
          <script type="text/javascript" src="jquery-1.12.4.js"></script>
          <script>
              function XmlSendRequest(){
                  var xhr = new XMLHttpRequest();
                  xhr.onreadystatechange = function(){
                      if(xhr.readyState == 4) {
                          var result = xhr.responseText;
                          console.log(result);
                      }
                  };
      
                  xhr.withCredentials = true;
      
                  xhr.open('PUT', "http://aylin.com:8000/test/", true);
                  xhr.setRequestHeader('k1', 'v1');
                  xhr.send();
              }
      
              function JqSendRequest(){
                  $.ajax({
                      url: "http://aylin.com:8000/test/",
                      type: 'PUT',
                      dataType: 'text',
                      headers: {'k1': 'v1'},
                      xhrFields:{withCredentials: true},
                      success: function(data, statusText, xmlHttpRequest){
                          console.log(data);
                      }
                  })
              }
          </script>
      </body>
      </html>
      class MainHandler(tornado.web.RequestHandler):

      def put(self):
      self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
      self.set_header('Access-Control-Allow-Credentials', "true")

      self.set_header('xxoo', "seven")
      self.set_header('zhangyanlinhenshuai', "feichangshuai")
      self.set_header('Access-Control-Expose-Headers', "shuai,shuaishuai")

      self.set_cookie('kkkkk', 'vvvvv');

      self.write('{"status": true, "data": "seven"}')

      def options(self, *args, **kwargs):
      self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
      self.set_header('Access-Control-Allow-Headers', "k1,k2")
      self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
      self.set_header('Access-Control-Max-Age', 10)

     


    项目推荐:

    2000多G的计算机各行业电子资源分享(持续更新)

    2020年微信小程序全栈项目之喵喵交友【附课件和源码】

    Spring Boot开发小而美的个人博客【附课件和源码】

    Java微服务实战296集大型视频-谷粒商城【附代码和课件】

    Java开发微服务畅购商城实战【全357集大项目】-附代码和课件

    最全最详细数据结构与算法视频-【附课件和源码】​​​​​​​​​​​​​​


    image.png

    ----------------------------- end ------------------------------------


     

    展开全文
  • jquery ajax方法使用

    千次阅读 2018-03-26 09:47:19
    jquery ajax方法使用先引入: &lt;script type="text/javascript" src="${ctx}/common/js/jquery.js"&gt;&lt;/script&gt; 再使用ajax方法,具体用法如下: $.ajax({ ...
  • jquery ajax全局方法使用

    千次阅读 2016-02-18 00:37:20
    JQuery 的AJAX方法使用非常的便利,并且提供了一些AJAX的全局方法供调用,合理使用这些方法将会产生非常大的帮助。 所谓全局方法,是指每当调用JQuery的AJAX方法,都会自动调用这些全局方法,以下是JQuery的所有全局...
  • 使用Ajax方法获取return返回值

    万次阅读 2018-08-15 19:58:35
    1、ajax使用同步方法 2、定义全局变量接收返回值 注意: 把ajax异步请求改为同步请求-&gt;async: false;既然是封装方法,有返回值才会赋值给afddlxList //使用变量接收 this.afddlxList=this....
  • ajax使用POST方法提交表单

    千次阅读 2010-01-17 21:02:00
    ajax使用post 方式提交表单时能提交多达2GB的内容,而GET方法只能提交最多512KB的内容.以下是ajax POST提交的例子. Ajax POST方法提交表单 <!-- window.onerror=function(errorMessage,errorUrl,errorNum) { alert...
  • ASP.NET Ajax使用方法

    千次阅读 2020-01-19 09:51:29
    文章目录一、概述二、如何使用1、ScriptManager控件2、UpdatePanel控件3、ScriptManagerProxy控件4、Timer控件5、UpdateProgress控件 一、概述 Ajax与传统的开发模式对比,请点击我! Microsoft在ASP.NET框架的基础...
  • 使用Ts实现ajax请求方法

    千次阅读 2019-07-21 15:28:27
    interface Config{ type:string; url:string; data?:string; dataType:string; ...//原生js封装的ajax function ajax(config:Config){ var xhr=new XMLHttpRequest(); xhr.open(config.type,co...
  • ajax使用 ajax+json

    万次阅读 多人点赞 2018-11-08 20:54:27
    首先将ajax写于js方法中,定义事件,让元素触发,触发之后就会有数据产生给服务端 $.ajax({ type: "POST", url: "test.php", data: "name=garfield&amp;age=18", success: ...
  • $.ajax()方法使用案例

    千次阅读 2017-10-17 10:55:19
    $.ajax()方法使用案例 需要引入jquery文件,本案例使用的是 jquery-2.0.0.js 1、ajax.jsp ; charset=UTF-8" pageEncoding="UTF-8"%> $(function() { $("#submit").click(fu
  • jQuery中Cookie及Ajax使用方法总结

    千次阅读 2020-03-30 19:01:50
    jQuery: 1.快速简洁的JavaScript框架 2.jQuery设计的宗旨是”write less,Do More“ ...jQuery中方法有很多,这里先总结一下jQuery中对Cookie的处理 以及Ajax方法 介绍一下cookie cookie的构成: name=val...
  • ajax使用get方法及jsonp传递参数实例

    千次阅读 2017-06-06 14:40:41
    ajax使用之get+jsonp+successcallback与主外键关联表中的子表增删查改代码实例。
  • 使用Promise封装简单Ajax方法

    万次阅读 2017-07-17 10:07:21
    可惜ECMAScript并没有封装好的Ajax方法(其实也没什么必要有),自己动手使用Promise撸一个吧!GETfunction getJSON (url) { return new Promise( (resolve, reject) => { var xhr = new XMLH
  • C#中使用Ajax访问后台方法

    千次阅读 2018-03-07 14:40:53
    之前学习的过程中,一直使用控件事件进行进行数据的CRUD操作,那么现在摆脱控件,使用Ajax进行方法访问一个简单的Demo,先来写一个xxx.aspx.cs中的方法 String addMethod(String name) { return name+" back"...
  • 使用jquery的ajax方法调用webservice服务

    千次阅读 2013-06-02 22:05:02
    使用jquery的ajax方法调用webservice服务于使用纯js的ajax方式调用webservice服务的区别主要在于 前者能在ie、chrome、firefox上正常运行,而后者只能在ie中正常运行,而且前者纯在跨域访问问题 1、新建一个名为...
  • Ajax.AjaxMethod的使用方法

    千次阅读 2012-08-10 11:59:19
    使用AjaxMethod可以在客户端异步调用服务端方法,简单地说就是在JS里调用后台.cs文件里的方法,做一些JS无法做到的操作,如查询数据库 使用AjaxMethod要满足一下几点: 1。如果还没有ajax.dll文件,就先下载一个来...
  • 需求: 使用json+ajax方法代替类似tab功能的效果,传统的tab需要从数据表一次性读取多条数据并全部置于页面上,而json+ajax 通过ajax访问后台方法可实时获取数据单条。最近实现了json+ajax 获取数据并改变页面...
  • jQuery实现Ajax方法

    万次阅读 2020-09-04 23:29:22
    jQuery中封装了很多可以实现异步交互的Ajax方法,今天就来简单介绍一下,这些方法的具体用法 一、jQueryElement.load() 参数:url,[data],callback 注意: 1.data不写默认用的方式是get。2.data有参数的话默认的...
  • Ajax.ActionLink使用方法

    千次阅读 2012-08-07 17:50:36
    1. 添加unobtrusive-ajax引用, 2. 添加ActionLink @Ajax.ActionLink("Click here to see today's special", "DailyDeal", new AjaxOptions { UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace...
  • Ajax中send方法参数的使用

    万次阅读 2017-12-04 11:47:30
    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。 例如 :  var url = "login.jsp?user=...
  •  type: "POST",//方法类型  dataType: "json",//预期服务器返回的数据类型  url: U('kscore/Index/add'),//url  data: $('#form1').serialize(),  success: function (result) {  console.log(result);//...
  • 使用ajax方法实现form表单的提交

    千次阅读 2018-02-09 10:52:13
    注:转载的原文地址:https://www.cnblogs.com/han-1034683568/p/7199168.html使用ajax方法实现form表单的提交作者:13GitHub:https://github.com/ZHENFENG13版权声明:本文为原创文章,未经允许不得转载。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 436,955
精华内容 174,782
关键字:

ajax使用方法