原生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 05 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery实现广告上下滚动效果
Mar 04 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
js中new一个对象的过程
2017/02/20 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python3中str(字符串)的使用教程
2017/03/23 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
入党申请自荐书范文
2014/02/11 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
大学生支教感言
2015/08/01 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python