原生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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现滑动开关效果
Aug 02 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连接Access数据库的方法小结
2013/06/20 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
python实现外卖信息管理系统
2018/01/11 Python
python实现微信远程控制电脑
2018/02/22 Python
解决python 输出是省略号的问题
2018/04/19 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
铭立家具面试题
2012/12/06 面试题
幼儿园个人师德总结
2015/02/06 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
仓库管理制度范本
2015/08/04 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
用Python生成会跳舞的美女
2022/01/18 Python