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("错误!!!");
} })
})

原生ajax 和jquery ajax 个人总结的更多相关文章

  1. 框架----Django之Ajax全套实例(原生AJAX,jQuery Ajax,“伪”AJAX,JSONP,CORS)

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  2. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  3. 原生js,jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  4. JQuery AJAX: 了解jQuery AJAX

    jQuery AJAX 一.简介1.AJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous ...

  5. AJAX和jQuery Ajax总结

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  6. AJAX,jQuery Ajax和Deferred

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  7. javascript ajax和jquery ajax

    一 进行ajax步骤: 1 获取dom值 2发送ajax请求 3返回成功进行前端逻辑处理 二 原生javascript的ajax <!DOCTYPE html> <html> ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

随机推荐

  1. 网络攻击技术开篇——SQL Injection

    本文转自: http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 摘要 日前,国内最大的程序员社区CSDN网站的用户数据库 ...

  2. ActiveMQ消息队列用法

    pom.xml文件如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...

  3. 简易封装手机浏览器touch事件

    做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...

  4. Google Guice学习

    学习动力:公司项目使用 官方文档:https://github.com/google/guice/wiki/Motivation 学习阶段:入门 主要部份: 简介 Bindings方式 Scopes设 ...

  5. bootstrap 响应式工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 简洁、轻量的前端UI框架 - Hbook

    Simple, lightweight front-end UI framework Get Start : http://www.bookcss.com Introduce Hbook focus ...

  7. 【Java深入研究】2、JVM类加载机制

    一.先看看编写出的代码的执行过程: 二.研究类加载机制的意义 从上图可以看出,类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行. 研究类 ...

  8. Android学习20--OpenGL的"mapPoints"

    在OpenGL中有时会需要求一个3维空间中的点在平移(缩放,旋转)后坐标是多少.需求相当于二维的mapPoints.可以通过这个函数实现 void multiplyMV (float[] result ...

  9. STM32F4时钟配置分析

    //学习STM32F4的过程中关于时钟上面讲的比较好 特地转发与大家分享 STM32F4时钟设置分析 原文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环 ...

  10. DOM操作表格——HTML DOM

    html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...