1、load方法

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

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

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>使用load()方法异步请求数据</title>

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

<input id="button" type="button" value="加载"/>

<div id="test"></div>

<script type="text/javascript">

$(document).ready(function(){

  $("#button").click(function(){

    $("#test").load("/phpinfo.php",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success")

        alert("外部内容加载成功！");

        alert(responseTxt);

      if(statusTxt=="error")

        alert("Error: "+xhr.status+": "+xhr.statusText);

    });

  });

});

</script>

</body>

</html>

2.getScript()方法

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

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

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

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

a.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

<input id="button" type="button" value="加载"/>

<script type="text/javascript">

$(document).ready(function(){

  $("#button").click(function(){

      $.getScript('http://www.123.com:81/2.js',function(){alert("success")})

  });

});

</script>

</body>

</html>

2.js

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

执行了回调函数。

3.通过get方法

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

$.get(url,[callback])

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

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

a.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript">

$.get("http://www.123.com/",function(data,status){alert("数据:" + data + "\n状态：" + status)});

</script>

</body>

</html>

a.html文件

4.通过post方法

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

a.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>

<body>

    <div id="html"></div>

<script type="text/javascript">

$.post("http://www.123.com/test.php",

    {

        name:"afanti",

        sex:"man"

    },

    function(data,status){

        alert("数据:" + data + "\n状态：" + status);

        document.getElementById("html").innerHTML = data

    });

</script>

</body>

</html>

test.php

5.getJSON

$.getJSON("/test.php?name=afanti&sex=man").then(

function(result){

alert(result.name+result.sex);

});

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

6.ajax发出请求。a.html

$.ajax({

    type:"get",

    url:"test.php",

    data:{"name":"afanti","sex":"man"},

    catche: false,

    async: false,

    timeout: 1000,

    dataType:"json",  //预期服务器返回的数据类型。支持参数：xml,html,script,json,text,jsonp

    contentType: 'application/x-www-form-urlencoded',
　　 headers:{
    　　"header1":"aaaa"    //设置请求头1
    },
　　 beforeSend:function(xhr){
　　　　xhr.setRequestHeader("header2","bbbb")            //设置请求头2
　　}
　　　　

    jsonp: 'callback',

    jsonpCallback: 'jsonpCallback',
　　 //xhrFields:{
　　 //withCredentials:true   //默认情况下，跨域请求不携带cookie。不跨域就可以携带cookie。通过设置这个参数可以实现跨域携带cookie但是后台代码，Access-Contro-Allow-Credentials:true加上这个头部信息
    //}

    success:function(data,status)

    {

        document.getElementById("html").innerHTML=data.name+";"+data.sex;

        // document.getElementById("html").innerHTML=data;

        alert(status);

    },

    error:function(err,status)

    {

        alert(status);

    }

    });

test.php

ajax实现jsonp

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

$.ajax({

    type:"get",

    url:"http://www.123.com:81/test.php",

    catche: false,

    async: false,

    timeout: 1000,

    dataType:"jsonp",  //预期服务器返回的数据类型。

    contentType: 'application/x-www-form-urlencoded',

    jsonp: 'callback',           //http://www.123.com:81/test.php?callback=callback1111&_=1529803521061发出这样的请求

    jsonpCallback: 'callback1111',        //回调函数的名字

    success:function(data,status)

    {

           for(var key in data)
　　　　　　{
　　　　　   console.log(key,data[key]);

　　　　　　}        //1、这里

           alert(status);

    },

    error:function(err,status)

    {

        // alert(status);

    }

    });

    function callback1111(data)

    {

        alert(data);          //2、都能获取到数据

    }

www.123.com:81/test.php

<?php

$callback = $_GET['callback'];//得到回调函数名

$data = array('name'=>'afanti','sex'=>'man');//要返回的数据

echo $callback.'('.json_encode($data).')';//输出

?>

可以进行跨域访问。

参考文章：

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. Odata简介和Demo

    转:http://www.cnblogs.com/shanyou/archive/2013/06/11/3131583.html 在SOA的世界中,最重要的一个概念就是契约(contract).在云计 ...

  2. linux的环境变量与文件查找

    1. 环境变量 1.1 变量 shell 中的变量有不同类型,可参与运算,有作用域限定 变量的作用域即变量的有效范围(比如一个函数中.一个源文件中或者全局范围),在该范围内只能有一个同名变量.一旦离开 ...

  3. jenkins在Linux 下安装部署

      这里介绍两种方法,一种方法将最新版jenkins加入到yum源,另外一种是下载指定版本的rpm包 系统centos6 自带jdk1.7 一 安装jenkins wget -O :下载并以不同的文件 ...

  4. 解决WCF跨机器调用时发生“调用方未由服务进行身份验证”的错误

    1.服务器端Web.config配置文件,增加如下部分: <system.serviceModel> <bindings> <wsHttpBinding> < ...

  5. 停课+2week

    可真是,累啊. 本以为停课之后会轻松一点,结果天天好累的说... 今天开始得去锻炼锻炼了... 已经好几次突然一阵晕眩了qwq... 希望我还能挺得住吧,至少要挺到WC结束啊... 这次,可是关系到我 ...

  6. Android学习笔记(4)----Rendering Problems(The graphics preview in the layout editor may not be accurate)

    在Android Studio中新建了一个 setting.xml 文件,布局好文件后,从 Text 界面切换到 Design 界面,显示了如下错误: 网上搜寻 The graphics previe ...

  7. C++学习笔记(2)----类模板和友元

    当一个类包含一个友元声明时,类与友元各自是否是模板是相互无关的.如果一个类模板包含一个非模板友元,则友元被授权可以访问所有模板实例.如果友元自身是模板,类可以授权给所有友元模板实例,也可以只授权给特定 ...

  8. 131.003 数据预处理之Dummy Variable & One-Hot Encoding

    @(131 - Machine Learning | 机器学习) Demo 直观来说就是有多少个状态就有多少比特,而且只有一个比特为1,其他全为0的一种码制 {sex:{male, female}}​ ...

  9. FileWriter与BufferedWriter的适用场景

    IO这块,各种Writer,Reader,让人眼晕 而在网上基本找不到在什么时候用哪个类,并且网上的IO demo 很多用法都是错的 在这简单的分析一下FileWriter与BufferedWrite ...

  10. Effective C++(4) 确定对象被使用前已先被初始化

    危害:读取未初始化的值会导致不明确甚至是半随机化的行为. 最佳处理办法:永远在使用对象之前先将它初始化:确保每一个构造函数都将对象的每一个成员初始化. 1 注意区分赋值和初始化: 从初始化的角度而言, ...