html_jQuery_ajax

时间:2021-10-22 03:50:41

ajax核心对象:  XMLHttpRequest

那年创建的XMLHttpRequest对象

function getXhr(){

  // 声明对象

  var xhr=null;

  //根据浏览器不同创建

  if(window.XMLHttpRequest){

    // 除 ie外的其他浏览器
  }else{
    // ie浏览器     xhr=new ActiveXObject(‘Microsoft.XMLHttp’);
  }
  return xhr; }

ajax 几种常用方法:

  1. load();
  2. $.get();
  3. $.post();
  4. $.getScript();
  5. $.getJSON();
  6. $.ajax;

 /*** load***/

$('div').load('url', data, callback );

url 需要请求的地址
data 请求数据,格式一般为key-value形式
 callback  回调函数(只能接收字符串类型(HTML格式))

没有请求数据时,请求类型为GET,

发送请求数据时,请求类型是POST,load方法的请求类型由是否请求数据决定。

<html>
<head>
<title></title>
</head>
<body>
<!--注意:谁调用load就把返回的数据写到那个元素里,这里是写入div里-->
<div>xxoo</div>
<script>
    user={'name':'xx','age':'123'};
        $('div').load('url',user,function(data){
// 形式参数data就是服务器端响应的数据
});
</script>
</body>
</html>

 /***$.get()***/

$.get(url ,data, callback, type);

url 请求的地址
data 请求数据,格式一般为key-value形式
callback       回调函数(可接收多个类型格式的数据)
type 返回内容格式,设置服务器端响应数据格式(xml,html,script,json,text等)默认为HTML格式     

无论是否发送请求数据,请求类型都是GET。

<html>
<head>
<title></title>
</head>
<body>
<div>xxoo</div>
<script>
$('div').click(function(){
    user={'name':'xx','age':'123'};
       $.get('url',user,function(data){
// 形式参数data就是服务器端响应的数据
},'json');
});
</script>
</body>
</html>

/***$.post()***/

$.post(url ,data, callback, type);

所有参数和使用方式和get一毛一样,只是请求数据方式是POST方式。

 /***$.getScript()***/

$.getScript('url', callback);  动态读取脚本(JavaScript代码脚本)

url: 读取脚本的地址,callback:读取成功后的回调函数

<html>
<head>
<title></title>
</head>
<body>
<input id='btn' type='button' value='getScript'/>
<script>
$('#btn').click(function(){
$.getScript('xx.js'); // 页面中,点击按钮时才读取,并不是页面加载的时候就读取
$.getScript('服务器url/xx.js',function(data){
// 回调函数,data为服务器返回的数据
       });
});
</script>
</body>
</html>

 /***$.getJSON()***/

由于万维网协议默认不允许跨域请求,所以有了跨域请求

跨域:

  完全跨域: --IP不同

  跨子域: --IP相同,但端口不同

$.getJSON(url,data,callback);通过GET 方式请求数据

注意url处的写法:'url?callback=?'

<html>
<head>
<title></title>
</head>
<body>
<input id='btn' type='button' value='getJSON'/>
<script>
$('#btn').click(function(){
$.getJSON('url?callback=?',function(data){// 回调函数,data为服务器返回的数据
consoles.log(data);
});
});
</script>
</body>
</html>

别人家的跨域逻辑图:

html_jQuery_ajax

/***$.ajax()***/

$.ajax(options);基础方法:

url 请求地址
type 请求类型,默认为GET
async 是否异步,默认为true
data 发送的请求数据,key-value 形式
dataType 设置响应数据格式 :HTML,xml,json
success 请求成功
error 请求失败

请求成功时(success),回调函数function(data , textStatus) { }

  • data: 服务器相应的数据内容
  • textStatus : AJAX请求状态,success(成功)

请求失败时(error),回调函数function(XMLHttpRequest,textStatus,errorThrown ){ }

  • XMLHttpRequest : AJAX 核心对象
  • textStatus : AJAX请求状态,error(失败),timeout(超时),notmodified(没有被修改)
  • errorRhrown : 错误异常信息
<html>
<head>
<title><title>
</head>
<body>
<input id='n1' name ='pp'/>
<input type = 'button' value = '提交' onclick='SubmitData();'/>
<script src = 'jquery-3.3.1.js'></script>
<script>
function SubmitData(){
// 获取值
var inpVal = $('#n1').val; // 获取用户输入的value值
var inpName = $('#n1').attr('name'); // 获取到pp
// 发送一个ajax请求
$.ajax({
url:'http://127.0.0.1:80000/index/'
data:{'kk':123,inpName:inpVal}, // 默认提交的数据
type:'POST',
success:function(arg){
// 当请求执行完成之后,自动调用
console.log(arg); // 接收到的数据
},
error:function(){
// 当请求错误之后,自动调用
}
});
}
</script>
</body>
</html>

不夸域的小栗子

jsonp(json with padding) : 用于解决主流浏览器的跨域数据访问的问题

<html>
<head>
<title></title>
</head>
<body>
<input type = 'button' value = '获取节目' onclick='SubmitData();'/>
<div id='container'></div>
<script src = 'jquery-3.3.1.js'></script> <script>
function SubmitData(){
$.ajax({
url:'xxxx',
data:{},
type:'GET',
dataType:'jsonp',
jsonp:'callback', // 以jsonp的形式返回并封装到list函数里
jsonpcallback:'list', // callback不能变,list可以变
success:function(arg){
//arg相当于字典
var jsonpArray = arg.data; // 获取到数组
$.each(jsonpArray,function(k,v){
// k,下标 v,数组值
var week = v.week;
var temp = '<h1>'+week+'</h1>';
$('#container').append(temp);
var listArray = v.list;
$.each(listArray,function(kk,vv){
var link = vv.link;
var name = vv.name;
// <a href = 'link'>name</a>
var tempNew = "<a href='" +link +"'>" +name + "</a><br/>";
$('#container').append(tempNew);
});
});
} }); </script>
</body>
</html>

跨域的丑栗子

现除了jsonp解决跨域问题外还有CORS..

相关文章