原生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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery实现抽奖功能
Oct 22 jQuery
使用jQuery实现购物车
Oct 29 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
教师节商场活动方案
2014/02/13 职场文书
需求分析说明书
2014/05/09 职场文书
公司承诺书范文
2014/05/19 职场文书
环保标语大全
2014/06/12 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
小学生通知书评语
2014/12/31 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书