原生Aajax 和jQuery Ajax 写法个人总结


Posted in jQuery onMarch 24, 2017

AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

一个完整的HTTP请求:由请求方式、URL、请求头和请求体组成;

一个完整的HTTP响应:由状态码、响应头、响应体组成;

http状态码:1开头 代表信息类 正在处理、2开头代表请求成功200 OK、3开头代表重定向、4开头代表客户端错误 404、5开头代表服务器错误;

响应状态:0,1,2,3,4  4代表响应成功。

open方法中的第三个参数代表是否异步(TRUE为异步   FALSE为同步)。

当请求方式为POST时,open方法后面要设置请求头(xmlhttp.setResponseHeader(""))send方法中要加入;

原生JavaScript写法:

var xhr;
  function rukou()//入口函数
  {
   xhr=getxhr();
   if(xhr==null)
   {
    alert("浏览器不支持!");
   }
   var url="";
   xhr.onreadystatechange=fanhui;
   xhr.open("GET",url,true);
   xhr.send(null);
  }
  function fanhui()//请求成功的回调函数
  {
   if(readyState==4)
   {
    document.getElementById("xx").innerHTML=xhr.responseText;
   }
  }
  function getxhr()//获取xmlhttp对象
  {
   xhr=null;
   try{
    xhr=new XMLHttpRequest();
   }
   catch(e)
   {
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
  }

jQuery中的ajax写法:

$("#tijiao").click(function(){
  $.ajax({
   type:"GET",
   url:"http://localhost/AJAX/test.php?name="+$("#name").val()+"&phone="+$("#phone").val(),
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("错误!!!");
   }
  })
 })
$("#tijiao").click(function(){
  $.ajax({
   type:"POST",
   url:"test.php",
   data:{
    name:$("#name").val(),
    phone:$("#phone").val()
   },
   dataType:"json",
   success:function(data){
    $("#success").html(data.msg);
   },
   error:function(){
    alert("错误!!!");
   }
  })
 })

 以上所述是小编给大家介绍的原生Aajax 和jQuery Ajax 个人总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
jquery实现全选、全不选以及单选功能
Mar 23 #jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 #jQuery
纯jQuery实现前端分页功能
Mar 23 #jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
详解React中setState回调函数
2018/06/14 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python中get和post有什么区别
2020/06/19 Python
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
初三新学期计划书
2014/05/03 职场文书
五水共治一句话承诺
2014/05/30 职场文书
影子教师研修方案
2014/06/14 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
给老婆的检讨书
2015/01/27 职场文书
离婚纠纷代理词
2015/05/23 职场文书
pandas数值排序的实现实例
2021/07/25 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers