js、jquery中的get post ajax汇总

桃扇骨 2022-01-25 23:03 236阅读 0赞

### 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**

###    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'的表单内所有可用元素