`
peihong-ph
  • 浏览: 22646 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax的使用

阅读更多
ajax的使用步骤:
1.需要通过JavaScript创建XMLHttpRequest对象  所有发送的ajax请求和接受服务器传回来的参数都要通过XMLHttpRequest对象来操作
function createXmlHttp(){
if(window.XMLHttpRequest){
//针对firefox,mozillar,opera,safari,IE7,IE8
xmlHttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else  if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
try{
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不能创建XmlHttpRequest");
}
}
}
}

2.利用已创建的XMLHttpRequest对象发送请求给服务器
请求是:servlet
通过XMLHttpRequest对象的open(first,second,third)方法设置要发送的请求
First是第一个参数指的是url提交的方式为get或者是post
第二个参数Second指的是发送请求的url 一般为servlet的url-pattern或者jsp页面的
第三个参数为请求的方式为同步还是异步 true代表异步请求
3.利用XMLHttpRequest的onreadystatechange监听XMLHttpRequest对象中readystate的状态 当状态发生改变的时候调用回调函数去讲返回的数据写到页面指定的地方  这里的回调函数不能加上();仅仅是回调函数名即可
4.利用XMLHttpRequest中的send()方法发送请求给服务器
  注意:send(null);null代表Firefox和IE都支持
5.需要注意的地方是:回调函数只有在readystate状态为4代表数据接受成功才去操作
此时XMLHttpRequest里面的status状态为200时代表数据接受无误 其他会出现404或者500的错误 返回的数据全部保存到XMLHttpRequest中的responseText中 最后可以将获取的返回数据写到页面指定的位置 实现局部刷新
Status的状态码及含义:
Http状态码 含义
200 请求成功
202 请求被接收,但处理未完成
404 请求资源未找到
500 内部服务器错误

ReadyState的状态值及含义
readyState值 含义
0 表示XMLHttpRequest对象已建立,但还未初始化,这时尚未调用open方法
1 表示open方法已经调用,但未调用send方法(已创建,未发送)
2 表示send方法已经调用,其他数据未知
3 表示请求已经成功发送,正在接受数据
4 表示数据已经成功接收。


以上是get的提交方式的想法 如果是post的提交方式和get方式的不同之处
1. 传参形式不同 get方式通过url后面加?再加传的参数 而post方式参数通过send(参数)传递
2. Post方式在send()之前要加上一句话xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
其他都一样
注意:url的路径问题 一般是servlet对应的url-pattern或者是jsp页面 以及到底包含不包含参数

分享到:
评论

相关推荐

    Ajax(Ajax使用js包)

    使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤

    AjaxRequest(Ajax使用包)

    **AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...

    ajax使用简单demo

    本教程以一个简单的Ajax使用示例为基础,帮助初学者理解并掌握其基本概念和使用方法。 ### 1. Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript向服务器发送HTTP请求,并接收...

    Ajax使用示例

    在本项目中,“Ajax使用示例”提供了一个完整的Ajax应用实例,帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在不刷新整个页面的情况下与服务器进行...

    各种版本ajax使用方法及相关问题

    本资料包详细介绍了四种不同版本的Ajax使用方法,以及解决相关问题的经验分享。 1. **jQuery的Ajax使用** jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括Ajax操作。使用`$.ajax()`函数是...

    aspnet ajax使用文档(AspNet_AJAX_Documentation)

    这份"aspnet ajax使用文档(AspNet_AJAX_Documentation)"涵盖了关于如何使用ASP.NET AJAX的核心概念、API以及最佳实践。 首先,ASP.NET AJAX的核心组件包括AJAX Control Toolkit和UpdatePanel。UpdatePanel是ASP.NET...

    北大青鸟Y2Ajax使用工具包

    【北大青鸟Y2Ajax使用工具包】是一个专门为ASP.NET开发者设计的集合,它包含了用于增强Web应用程序交互性和用户体验的Ajax工具。这个压缩包中主要包括了三部分:AjaxControlToolkit、ASPAJAXExtSetup以及CodeSmith ...

    通过DOM和Ajax使用XML_从菜鸟到专家2006

    《通过DOM和Ajax使用XML_从菜鸟到专家2006》是一本旨在帮助初学者深入理解并掌握XML、DOM以及Ajax技术的书籍。XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于数据交换、配置文件、文档存储...

    掌握Ajax使用 JSON 进行数据传输

    掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输

    ACCP 5.0 Y2Ajax使用工具包

    【ACCP 5.0 Y2Ajax使用工具包】是一个专为北大青鸟ACCP 5.0课程设计的JavaScript库,旨在简化Web应用程序中的异步通信,即Ajax技术的实现。这个工具包是为了帮助学员更好地理解和应用Ajax技术,提高Web开发效率。...

    一个完整的ajax应用例子

    2. **JavaScript**:Ajax使用JavaScript来创建XMLHttpRequest对象,它是与服务器进行通信的关键。 3. **XML与JSON**:虽然名字中有XML,但现代Ajax应用更倾向于使用JSON(JavaScript Object Notation)作为数据交换...

    ajax使用

    介绍ajax如何使用.

    ajax使用小例子,局部刷新

    ajax使用小例子 //作者:核武器 2010.01.26 qq:61357455 Email:Behappy1982@163.com 单击按钮的时候,显示按钮上的文字,效果是局部WEB刷新,增加用户体验

    ajax使用例子 包括返回xml

    文档"ajax_xml运用.doc"可能包含了一个使用Ajax获取并解析XML数据的例子。通常,这个过程包括以下几个步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,通过`new XMLHttpRequest()`来创建一个实例。 2. **...

    aspnet ajax使用示例(AspNet_AJAX_Documentation)

    这个压缩包"AspNet_AJAX_Documentation(Samples)"很可能是包含了一系列ASP.NET AJAX的使用示例,帮助开发者深入理解和实践这一技术。 在ASP.NET AJAX中,主要涉及以下几个核心概念和技术: 1. **UpdatePanel**:...

    websocket long poll Ajax使用测试

    客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器...

    thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

    本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...

Global site tag (gtag.js) - Google Analytics