原生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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 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
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP 错误处理机制
2015/07/06 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
js比较日期大小的方法
2015/05/12 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
简单的三步vuex入门
2018/05/20 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
详解Python的Django框架中的中间件
2015/07/24 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python识别验证码图片实例详解
2020/02/17 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
普通PHP程序员笔试题
2016/01/01 面试题
工商技校毕业生自荐信
2013/11/15 职场文书
小学运动会开幕词
2015/01/28 职场文书
2015新学期开学寄语
2015/02/26 职场文书
停电通知范文
2015/04/16 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
放飞理想主题班会
2015/08/14 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
Python使用openpyxl批量处理数据
2021/06/23 Python