原生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 27 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
详解jQuery-each()方法
Mar 13 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
用ODBC的分页显示
2006/10/09 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python工厂函数用法实例分析
2018/05/14 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python suds访问webservice服务实现
2020/06/26 Python
用Python实现职工信息管理系统
2020/12/30 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
入党推优材料
2014/06/02 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
投诉书范文
2015/07/02 职场文书
妇产科护理心得体会
2016/01/22 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js