1、load方法

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

$(selector).load(URL,data,callback);

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

例子：加载phpinfo.php页面并将放回的结果放到<div>中

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>使用load()方法异步请求数据</title>
  6.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <input id="button" type="button" value="加载"/>
  10. <div id="test"></div>
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13.   $("#button").click(function(){
  14.     $("#test").load("/phpinfo.php",function(responseTxt,statusTxt,xhr){
  15.       if(statusTxt=="success")
  16.         alert("外部内容加载成功！");
  17.         alert(responseTxt);
  18.       if(statusTxt=="error")
  19.         alert("Error: "+xhr.status+": "+xhr.statusText);
  20.     });
  21.   });
  22. });
  23. </script>
  24. </body>
  25. </html>

2.getScript()方法

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

####这个方法就是调用js文件并执行，可以跨域操作#####

a.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  6. </head>
  7. <body>
  8. <input id="button" type="button" value="加载"/>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.   $("#button").click(function(){
  12.       $.getScript('http://www.123.com:81/2.js',function(){alert("success")})
  13.   });
  14. });
  15. </script>
  16. </body>
  17. </html>

2.js

alert('2.js加载成功');  调用成功

执行了回调函数。

3.通过get方法

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

#########不能跨域访问###############

a.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. $.get("http://www.123.com/",function(data,status){alert("数据:" + data + "\n状态：" + status)});
  10. </script>
  11. </body>
  12. </html>

a.html文件

4.通过post方法

#######不能给跨域############

a.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  6. </head>
  7. <body>
  8.     <div id="html"></div>
  9. <script type="text/javascript">
  10. $.post("http://www.123.com/test.php",
  11.     {
  12.         name:"afanti",
  13.         sex:"man"
  14.     },
  15.     function(data,status){
  16.         alert("数据:" + data + "\n状态：" + status);
  17.         document.getElementById("html").innerHTML = data
  18.     });
  19. </script>
  20. </body>
  21. </html>

test.php

5.getJSON

  1. $.getJSON("/test.php?name=afanti&sex=man").then(
  2. function(result){
  3. alert(result.name+result.sex);
  4. });

then后面处理回调。getScript也可以使用。

6.ajax发出请求。a.html

  1. $.ajax({
  2.     type:"get",
  3.     url:"test.php",
  4.     data:{"name":"afanti","sex":"man"},
  5.     catche: false,
  6.     async: false,
  7.     timeout: 1000,
  8.     dataType:"json",  //预期服务器返回的数据类型。支持参数：xml,html,script,json,text,jsonp
  9.     contentType: 'application/x-www-form-urlencoded',
    　　 headers:{
        　　"header1":"aaaa"    //设置请求头1
        },
    　　 beforeSend:function(xhr){
    　　　　xhr.setRequestHeader("header2","bbbb")            //设置请求头2
    　　}
    　　　　
  10.     jsonp: 'callback',
  11.     jsonpCallback: 'jsonpCallback',
    　　 //xhrFields:{
    　　 //withCredentials:true   //默认情况下，跨域请求不携带cookie。不跨域就可以携带cookie。通过设置这个参数可以实现跨域携带cookie但是后台代码，Access-Contro-Allow-Credentials:true加上这个头部信息
        //}
  12.     success:function(data,status)
  13.     {
  14.         document.getElementById("html").innerHTML=data.name+";"+data.sex;
  15.         // document.getElementById("html").innerHTML=data;
  16.         alert(status);
  17.     },
  18.     error:function(err,status)
  19.     {
  20.         alert(status);
  21.     }
  22.     });

test.php

ajax实现jsonp

http://www.123.com/a.html

  1. $.ajax({
  2.     type:"get",
  3.     url:"http://www.123.com:81/test.php",
  4.     catche: false,
  5.     async: false,
  6.     timeout: 1000,
  7.     dataType:"jsonp",  //预期服务器返回的数据类型。
  8.     contentType: 'application/x-www-form-urlencoded',
  9.     jsonp: 'callback',           //http://www.123.com:81/test.php?callback=callback1111&_=1529803521061发出这样的请求
  10.     jsonpCallback: 'callback1111',        //回调函数的名字
  11.     success:function(data,status)
  12.     {
  13.            for(var key in data)
    　　　　　　{
    　　　　　   console.log(key,data[key]);
  14.  
  15. 　　　　　　}        //1、这里
  16.            alert(status);
  17.     },
  18.     error:function(err,status)
  19.     {
  20.         // alert(status);
  21.     }
  22.     });
  23.     function callback1111(data)
  24.     {
  25.         alert(data);          //2、都能获取到数据
  26.     }

www.123.com:81/test.php

  1. <?php
  2. $callback = $_GET['callback'];//得到回调函数名
  3. $data = array('name'=>'afanti','sex'=>'man');//要返回的数据
  4. echo $callback.'('.json_encode($data).')';//输出
  5. ?>

可以进行跨域访问。

参考文章：

https://www.xmanblog.net/2018/04/09/web-cross-domain-ecurity/

jQuery中异步请求的更多相关文章

  1. 在内核中异步请求设备固件firmware的测试代码

    在内核中异步请求设备固件firmware的测试代码 static void ghost_load_firmware_callback(const struct firmware *fw, void * ...

  2. SpringBoot中异步请求和异步调用（看这一篇就够了）

    原创不易,如需转载,请注明出处https://www.cnblogs.com/baixianlong/p/10661591.html,否则将追究法律责任!!! 一.SpringBoot中异步请求的使用 ...

  3. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  4. JavaScrpit中异步请求Ajax实现

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需 ...

  5. jQuery中ajax请求的六种方法（三、一）：$.ajax()方法

    1.基础的$.ajax()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  6. ASP.NET WebForm中异步请求防止XSRF攻击的方法

    在ASP.NET MVC中微软已经提供了如何防止跨域攻击的方法.对于传统Webfrom中使用Handler来接受ajax的Post请求数据,如何来防止XSRF攻击呢.这里给大家提供一个简单地方法,和M ...

  7. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  8. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  9. vue中异步请求渲染问题（swiper不轮播）（在开发过程中遇到过什么问题、踩过的坑）

    问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...

随机推荐

  1. js获取网页上选中的部分，包含html代码

    function getSelectedContents(){     if (window.getSelection) { //chrome,firefox,opera         var ra ...

  2. Vs2015+opencv2.4.10出现msvcp120d.dll丢失 opencv2410.props

    今天vs2015配置好opencv编译运行会报错msvcp120d.dll丢失,只要把这个文件复制到你在第一步设置的Path环境变量路径里,和opencv的dll放在一起就行了.(初次配置完环境变量后 ...

  3. MVC官方教程索引

    1.MVC教程首页http://www.asp.net/learn/mvc/?lang=cs 2.MVC概况2.1创建一个基于数据库的"电影"web应用http://www.asp ...

  4. Java面试题之数据库三范式是什么？

    什么是范式? 简言之就是,数据库设计对数据的存储性能,还有开发人员对数据的操作都有莫大的关系.所以建立科学的,规范的的数据库是需要满足一些规范的来优化数据数据存储方式.在关系型数据库中这些规范就可以称 ...

  5. js 数组常用的一些方法

    数组可以说是js经常会遇到的数据结构,以下我们对数组进行详细的学习! 一.数组的创建 var mycars = new Array(): || new Array(3);  || new Array( ...

  6. java util 中set,List 和Map的使用

    https://www.cnblogs.com/Lxiaojiang/p/6231724.html 转载

  7. 【SSH网上商城项目实战09】添加和更新商品类别功能的实现

    转自:https://blog.csdn.net/eson_15/article/details/51347734 上一节我们做完了查询和删除商品的功能,这一节我们做一下添加和更新商品的功能. 1.  ...

  8. The configuration section 'system.serviceModel' cannot be read because it is missing a section decla

    将Asp.Net 2.0的Web Site搭建在IIS7(7.5)上时,运行出现500.19错误, 错误提示为 The configuration section 'system.serviceMod ...

  9. LinkedList实现队列存储结构

    package com.tercher.demo; import java.util.LinkedList; public class Queue { //用LinkedList 实现队列的数据存储结 ...

  10. POJ P2318 TOYS与POJ P1269 Intersecting Lines——计算几何入门题两道

    rt,计算几何入门: TOYS Calculate the number of toys that land in each bin of a partitioned toy box. Mom and ...