html_jQuery_ajax
ajax核心对象: XMLHttpRequest
那年创建的XMLHttpRequest对象
function getXhr(){
// 声明对象
var xhr=null;
//根据浏览器不同创建
if(window.XMLHttpRequest){
// 除 ie外的其他浏览器
}else{
// ie浏览器
xhr=new ActiveXObject（‘Microsoft.XMLHttp’）;
}
return xhr;
}
ajax 几种常用方法：
- load();
- $.get();
- $.post();
- $.getScript();
- $.getJSON();
- $.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>
别人家的跨域逻辑图：
/***$.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..
html_jQuery_ajax的更多相关文章
随机推荐
- python第十二天, 三元表达式, 函数对象，名称空间与作用域，函数的嵌套定义
复习 1. 字符串的比较: 2. 函数的参数:形参与实参 3. 实参的分类:位置实参与关键字实参 4. 形参分类: 1.无值位置形参 2.有值位置形参 3.可变长位置形参 4.有无值关键字形参 5.可 ...
- Day055--MySQL--外键的变种,表与表的关系,单表查询,多表查询, 内连接,左右连接,全外连接
表和表的关系 ---- 外键的变种 * 一对多或多对一 多对多 一对一 参考 https://www.cnblogs.com/majj/p/9169416.html 如何找出两张表之间的关系 分析步骤 ...
- 第一个thinkphp项目遇到的知识
本文是于项目完成后所写,基本是想到 哪写到哪,所以顺序会很乱. 1.在后台处理ueditor这种文本编辑器的时候,会遇到取值问题,如果你想要取纯文本内容:getContentTxt(),没有段落格式: ...
- PLsql快捷键
plsql使用技巧 1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动 ...
- Python基础和原反补码及表达式
基础语法 1.注释 “#”标注的文件 2.数字 整数,不区分long和int 进制0xa.0o10.0b10 bool,2个值True.False 浮点数 1.2.3.1314.-0.12.1.46e ...
- element ui change 传递带自定义参数
@change="((val)=>{changeStatus(val, index)})" https://www.cnblogs.com/mmzuo-798/p/10438 ...
- IE7下使用兼容Icon-Font CSS类
Iconfont在IE7下需要使用unicode方式,但是这种方式不太方便,使用以下代码可使IE7像普通用法使用. @font-face {font-family: "anticon&quo ...
- 获取spring的IOC核心容器，并根据id获取对象
public class Client { /** * 获取spring的IOC核心容器,并根据id获取对象 * ApplicationContext的三个常用实现类 * classPathXmlAp ...
- HttpClient的巨坑
之前做项目的时候,调用api都是使用的HttpWebRequest 最近一个项目改用HttpClient,用了之后,感觉很坑. 1.高并发情况下,造成tcp连接占用的端口无法释放(时间为2MSL,此时 ...
- JAVA进阶17
---恢复内容开始--- 间歇性混吃等死,持续性踌躇满志系列-------------第17天 1.递归结构 递归是一种常见的解决问题的方法,即把问题逐渐简单化.递归的基本思想就是自己就是“自己调用自 ...