AJAX与Jqurey实现AJAX

AJAX = Asynchronous JavaScript and XML
(异步的 JavaScript 和 XML)。

Ajax作用:是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端!

异步:当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信息发送请求]!
同步:当浏览器向服务器发送请求的时候,整个页面都会刷新!

XML:一种文件格式,现在用XML这种返回格式的数据比较少了,XML解析性能较差,而且比较消耗带宽[],现在大多数都是在是使用JSON数据的返回格式!!

2.使原生js发送AJAX请求:
1).创建XMLHttpRequest对象

大部分比较新的浏览器都支持的方式(IE7以上)
var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以下的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

通用的获取XMLHttpRequest对象的方法:

//写一个获取XHR的方法
function getXMLHttpRequest(){
try{
//大部分浏览器都支持的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下浏览器支持的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你是火星来的吧!你的浏览器不支持AJAX!");
}

}

}
}

2).给open方法设置请求参数[method,url]

xhr.open(请求方式,请求地址);
在发送post请求时,还需要设置一个请求头,如下:
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3).发送请求(send()方法)

xhr.send(请求体);
get请求没有请求体,所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。

4.需要使用onreadystatechange回调函数监听readyState这个属性状态变化!

//xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
xhr.onreadystatechange = function(){
//判断当前readyState是否为4 , 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息,做相关操作。

//如果信息为纯文本
xhr.responseText

//如果信息为XML
xhr.responseXML
}
};

通过jQuery实现AJAX
> 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
> post方法不会有缓存的问题,所以我们开发时使用post方法较多。
[1] post()方法
$.post(url, [data], [callback], [type])
参数:
url:发送AJAX的请求地址,字符串。
data:发送给服务器的请求参数,JSON格式。
callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
jQuery会将响应信息以回调函数的参数的形式返回
type:响应信息的类型,字符串。一般两个常用值text、json

[2] get()方法
- get方法和post方法使用方式基本一致。

[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。

时间: 2024-08-05 12:24:15

AJAX与Jqurey实现AJAX的相关文章

MVC中Ajax post Json和Ajax Get

在MVC中用ajax的方式传送数据 先创建实体 using System.ComponentModel; namespace ViewerWeb.Models { public class UserInfo { [DisplayName("用户名:")] public string UserName { get; set; } [DisplayName("年 龄:")] public int Age { get; set; } [DisplayName("

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..

JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)

一.Ajax跨域概述 同源策略 - 同源策略(Same origin policy)是一种约定,它是浏览器的核心也最最基本的核心.如果少了同源策略,则浏览器的正常功能可能都会收到影响.可以说Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现 - 它是由 Netscape 提出的一个著名的安全策略 - 现在所有支持 JavaScript 的浏览器都会使用这个策略 - 所谓同源策略是指,域名.协议.端口相同 域名概述 - 域名(Domain Name) 是由一串用点分隔的名字组成的In

闲话ajax,例ajax轮询,ajax上传文件

引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧! ajax的出现,可以出给用户带来了很好的体验,证据如下: 1.感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不

jQuery Ajax 实例 详细介绍$.ajax、$.post、$.get的使用

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦需要处理浏览器之间的兼容问题,Jquery大大简化了我们的这些操作操作,不用在考虑浏览器这方面的问题,可以直接使用! $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.aj

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

弄一个ajax笔记方便查询-$.ajax()

$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表: 参数 类型 说明 url String 发送请求的地址 type String 请求方式:POST或GET,默认GET timeout Number 设置请求超时的时间(毫秒) data Object或String 发送到服务器的数据,对象或键值对字符串 dataType String 返回的数据类型,比如htm

不用框架使用ajax 纯js使用ajax post,get范例及其区别

原文发布时间为:2009-11-15 -- 来源于本人的百度文章 [由搬家工具导入] 不用框架使用ajax 纯js使用ajax post,get范例及其区别 ========================范例==================================== 页面default5.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx

JavaScript的ajax与jQuery的ajax案例分析

先谈JavaScript的ajax,传输数据为json #############################################JavaScript ajax json########################################### 注意:由于要用到json的JSON.stringify()方法,需要引入json2.js库. html代码: <!DOCTYPE html><html lang="en"><head&g