js原生ajax与jquery的ajax的用法区别

Posted 2020-10-01 一片黑

什么是ajax和原理?

• AJAX 是一种用于创建快速动态网页的技术。
• 通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据

XMLHttpRequest对象的基本属性：

• onreadtstatechange 每次状态改变所触发事件的时间处理程序。
• responseText 从服务器响应返回以字符串为形式的数据
• responseXML 从服务器响应返回以XML（DOM兼容文档）数据对象
• status 从服务器返回的数字代码
  
  • 100-199 用于指定客户端应相应的某些动作。
  • 200-299 用于表示请求成功。
  • 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  • 400-499 用于指出客户端的错误。
  • 500-599 用于支持服务器错误。
  • 常用 200（正常）404（找不到） 500（服务器错误）
  • 详细看 链接
• status Text (如： if status==200 =>OK ) 伴随状态码的字符串信息
• readyState 对象状态值
  
  • 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
  • 1 (初始化) 对象已建立，尚未调用send方法
  • 2 (发送数据) send方法已调用，但是当前的状态及http头未知
  • 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
  • 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
    　　

实例

<div id="content"></div>
<button id="btn"></button>
<script>

var btn=document.getElementById(\'btn\');

btn.onclick=function(){

var http=null;
if(window.ActiveXObject){
    http=new ActiveXObject(\'Microsoft.XmlHTTP\');
}else{
  http=new XmlHttpRequest();
}
var url="http://XXXX";  //指定url
http.open(\'GET\',url,true); 
//第一个参数选择哪种方式提交数据
//第二个参数是选择传递的地址
//第三个参数是选择是否异步传输，true:异步，false:同步

//当状态发生改变就触发的事件（可以理解为node.onchange=function()）
http.readystatechange=function(){
   if(http.status==4&&http.status==200){
        //返回的对象状态值为:4
        //返回的状态码为200        document.getElementById(\'content\').innerhtml=http.responseText;//返回值赋值到DOM
   }
   //简单的异常处理
   if(http.status==404){
       alert(\'响应失败\');
   }
}
发送一个 HTTP 请求
http.send();
}
</script>

接下来是介绍jQuery的ajax提交

因为是为了对比与原生的区别，毕竟jQuery 的ajax更强大了，因为提供了更多内容的封装
- 首先，jquery的常用方式有

$.ajax，$.post， $.get， $.getJSON。

• 先来个实例压压惊

$.ajax({
    //请求类型，get,post
    type:\'GET\',
    // 请求的数据类型，可以是html,json,xml等
    dataType:\'json\'，
    //传输的数据
    data:{
        num1:num1,
        num2:num2
    },
    //选择是否支持异步刷新，默认为true
    async:true,
    success:function(){
         console.log(\'very good 请求成功\');
    },
    error:function(){
         console.log(\'对不起，请求失败\');
    }
})

 

• 如果你是用.get或者 . post那更简单了，直接把type去掉也可以了
  是不是很简单？相比传统的用法，看起来更简洁，更容易理解，相当于往对象里面放值就可以自动化使用了

其实核心都是XMLHttpRequest对象的调用，和其对象属性的掌握。

原文转自：http://blog.csdn.net/dexing07/article/details/52759874