原生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 相关文章推荐
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
浅谈电磁辐射对健康的影响
2021/03/01 无线电
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
js 操作css实现代码
2009/06/11 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
利用python发送和接收邮件
2016/09/27 Python
关于python写入文件自动换行的问题
2018/06/23 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Python PO设计模式的具体使用
2019/08/16 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
super关键字的用法
2012/04/10 面试题
交通事故协议书范文
2014/04/16 职场文书
干部年终考核评语
2015/01/04 职场文书
应聘教师自荐信
2015/03/26 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL