get和post的區別
1.安全性：get是通過http協議的header發送請求，所以會將參數拼接在地址欄中，所以安全性很差；post是通過http協議的body發送請求，地址欄中並不會出現，所以相對安全；還有一點，用get方法發送請求會被客戶端瀏覽器緩存，通過查看歷史記錄可以查看到用戶信息，所以非常不安全。
2.傳送大小：get只能傳送2kb，而post一般不受限制
3.效率：get效率高，post效率低
4.get就是爲了從服務器得到數據，而post則是發送數據
5.GET產生一個TCP數據包；POST產生兩個TCP數據包。對於GET方式的請求，瀏覽器會把http header和data一併發送出去，服務器響應200（返回數據）；而對於POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據）。
js實現ajax
//get
function get() {
//創建XMLHttpRequest
let xhr = new XMLHttpRequest();
//監聽響應
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.state === 200 || xhr.state === 304)) {
console.log(xhr.responseText);
}
};
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();
}
//post
function post () {
//請求參數、url、創建XMLHttpRequest
let data = 'name=tom&age=18',
url = 'xhr.php',
xhr = new XMLHttpRequest();
xhr.open('post', url);
//設置header
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && ( xhr.state === 200 || xhr.state === 304 )){
console.log(xhr.responseText);
}
}
}
jquery中get post ajax
jquery.ajax([settings])。發請求並且能得知成功還是失敗。
type:類型，"POST"或者"GET"，默認是"GET"。
url:發送請求的地址。
data：是一個對象，連同請求發送到服務器的數據
dataType：預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包含的MIME信息來智能判斷，一般我們採用json個數，可以設置爲"json"。
success:是一個方法，請求成功後的回調函數。傳入返回後的數據，以及包含成功代碼的字符串。
error:是一個方法、請求失敗時調用此函數。傳入XMLHttpRequest對象。
get
$(document).ready(function(){
$("#searchBtn").click(function(){
$.ajax({
type:"GET",
url:" https://api.passport.xxx.com/checkNickname?username="+mylogin.username+"&token="+mylogin.token+"&nickname="+nickname+"&format=jsonp&cb=?",
dataType:"json",
success:function(data){
if(data.errorCode==0){
$("#nickname").val(mylogin.nickname);
}else{
$("#nickname").val("用戶");
}
},
error:function(jqXHR){
console.log("Error: "+jqXHR.status);
}
});
});
});
post
function dologin(qrid,username,token){
$.ajax({
url:"http://api.passport.pptv.com/v3/login/qrcode.do",
type:"post",
dataType:"jsonp",
data:{from:"clt",qrid:qrid,username:username,token:token},
success:function(data){
try {
var p = external.GetObject('@xxx.com/passport;1');
p.On3rdLogin2(0,0,data,true);
} catch (e) {
return false;
}
setTimeout(function () {
try {
var wb = external.Get('Signin2Window');
wb.OnClose();
} catch (e) {
}
}, 200);
}
});
}
jQuery中常用的函數方法
初始化函數
$(document).ready(function(){
});
作用：它可以極大地提高web應用程序的響應速度。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行.
$("p").bind("click", function(){
alert( $(this).text() );
});
作用：爲每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。起到事件監聽的作用。
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
作用：每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。挺有趣的一個函數，在動態實現某些功能的時候可能會用到。
addClass(class)和removeClass(class)
代碼：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
也可以寫成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });
作用：爲指定的元素添加或移除樣式，從而實現動態的樣式效果，上面的實例中實現鼠標移動雙色表格的代碼。
css(name,value)
代碼：
$("p").css("color","red");
作用：很簡單，就是在匹配的元素中，設置一個樣式屬性的值。這個個人感覺和上面的addClass(class)有點類似。
還有很多，就不一一列舉了。。。
鼠標事件 鍵盤事件 表單事件 文檔/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover
jQuery 選擇器簡介
jQuery 選擇器允許對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()。
1 .基本選擇器
$("#test") 選擇id值爲test的元素，id值是唯一的所以返回單個元素。
$("div") 選擇所有的div標籤元素，返回div元素數組
$(".myclass") 選擇使用myclass類的css的所有元素
$("*") 選取所有元素。
$("#test,div,.myclass") 選取多個元素。
2.層次選擇器
複製代碼
$("div span") 選取<div>裏的所有<span>元素
$("div >span") 選取<div>元素下元素名是<span>的子元素
$("#one +div") 選取id爲one的元素的下一個<div>同輩元素 等同於$("#one").next("div")
$("#one~div") 選取id爲one的元素的元素後面的所有<div>同輩元素 等同於$("#one").nextAll("div")
$("#one").siblings("div") 獲取id爲one的元素的所有<div>同輩元素（不管前後）
$("#one").prev("div") 獲取id爲one的元素的前面緊鄰的同輩<div>元素
所以 獲取元素範圍大小順序依次爲：
$("#one").siblings("div")>$("#one~div")>$("#one +div") 或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
3.基本過濾選擇器
$("div:first") 選取所有<div>元素中第1個<div>元素
$("div:last") 選取所有<div>元素中最後一個<div>元素
$("input:not(.myClass)") 選取class不是myClass的<input>元素
$("input:even") 選取索引是偶數的<input>元素(索引從0開始)
$("input:odd") 選取索引是基數的<input>元素(索引從0開始)
$("input:eq(2)") 選取索引等於2的<input>元素
$("input:gt(4)") 選取索引大於4的<input>元素
$("input:lt(4)") 選取索引小於4的<input>元素
$(":header") 過濾掉所有標題元素，例如：h1、h2、h3等
$("div:animated") 選取正在執行動畫的<div>元素
$(":focus") 選取當前獲取焦點的元素
4.內容過濾選擇器
$("div:contains('Name')") 選取所有<div>中含有'Name'文本的元素
$("div:empty") 選取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)") 選取所有含有<p>元素的<div>元素
$("div:parent") 選取擁有子元素的（包括文本元素）<div>元素
5.可見性過濾選擇器
$("div:hidden") 選取所有不可見的<div>元素
$("div:visible") 選取所有可見的<div>元素
6.屬性過濾選擇器
$("div[id]") 選取所有擁有屬性id的元素
$("input[name='test']") 選取所有的name屬性等於'test'的<input>元素
$("input[name!='test']") 選取所有的name屬性不等於'test'的<input>元素
$("input[name^='news']") 選取所有的name屬性以'news'開頭的<input>元素
$("input[name$='news']") 選取所有的name屬性以'news'結尾的<input>元素
$("input[name*='news']") 選取所有的name屬性包含'news'的<input>元素
$("div[title|='en']") 選取屬性title等於'en'或以'en'爲前綴(該字符串後跟一個連字符'-')的<div>元素
$("div[title~='en']") 選取屬性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']") 選取擁有屬性id,並且屬性title以'test'結束的<div>元素
7.子元素過濾選擇器
$("div .one:nth-child(2)") 選取class爲'one'的<div>父元素下的第2個子元素
$("div span:first-child") 選取每個<div>中的第1個<span>元素
$("div span:last-child") 選取每個<div>中的最後一個<span>元素
$("div button:only-child") 在<div>中選取是唯一子元素的<button>元素
8.表單對象屬性過濾選擇器
$("#form1 :enabled") 選取id爲'form1'的表單內所有可用元素
$("#form2 :disabled") 選取id爲'form2'的表單內所有不可用元素
$("input :checked") 選取所有被選中的<input>元素
$("select option:selected") 選取所有的select 的子元素中被選中的元素
9.表單選擇器
$(":input") 選取所有<input>,<textarea>,<select> 和 <button>元素
$(":text") 選取所有的單行文本框
$(":password") 選取所有的密碼框
$(":radio") 選取所有單的選框
$(":checkbox") 選取所有的多選框
$(":submit") 選取所有的提交按鈕
$(":image") 選取所有的圖像按鈕
$(":reset") 選取所有的重置按鈕
$(":button") 選取所有的按鈕
$(":file") 選取所有的上傳域
$(":hidden") 選取所有不可見元素