`

ajax基础-jquery

阅读更多
//--------------------------------使用jquery--------------------------------------------
//
定义用户名校验的方法
function verify(){
    
//首先测试一下页面的按钮按下,可以调用这个方法
    //使用javascript的alert方法,显示一个探出提示框
    //alert("按钮被点击了!!!");

    
//1.获取文本框中的内容
    //document.getElementById("userName");  dom的方式
    //Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点。
    //jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
    var jqueryObj = $("#userName");
    
//获取节点的值
    var userName = jqueryObj.val();
    
//alert(userName);

    
//2.将文本框中的数据发送给服务器段的servelt
    //使用jquery的XMLHTTPrequest对象get请求的封装
    $.get("AJAXServer?name=" + userName,null,callback);


}


//回调函数
function callback(data) {
//    alert("服务器段的数据回来了!!");
    //3.接收服务器端返回的数据
//
    alert(data);
    //4.将服务器段返回的数据动态的显示在页面上
    //找到保存结果信息的节点
    var resultObj = $("#result");
    
//动态的改变页面中div节点中的内容
    resultObj.html(data);
    alert(
"");
}


//以上简化如下
function verify() {
    $.get(
"AJAXServer?name="+$("#name").val(),null,function(data){
    $(
"#result").html(data);
    }
);
}
);
}


//---------------------使用XMLHTTPRequest对象来进行AJAX的异步数据交互-----------------------------------
var xmlhttp;
function verify() {
    
//0。使用dom的方式获取文本框中的值
    //document.getElementById("userName")是dom中获取元素节点的一种方法,一个元素节点对应HTML页面中的一个标签,如果<input>
    //。value可以获取一个元素节点的value属性值
    var userName = document.getElementById("userName").value;

    
//1.创建XMLHttpRequest对象
    //这是XMLHttpReuquest对象无部使用中最复杂的一步
    //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

    
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
        //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
        //排在前面的版本较新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        
for (var i = 0; i < activexName.length; i++{
            
try{
                
//取出一个控件名进行创建,如果创建成功就终止循环
                //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
                xmlhttp = new ActiveXObject(activexName[i]);
                
break;
            }
 catch(e){
            }

        }

    }

    
//确认XMLHTtpRequest对象创建成功
    if (!xmlhttp) {
        alert(
"XMLHttpRequest对象创建失败!!");
        
return;
    }
 else {
        alert(xmlhttp.readyState);
    }


    
//2.注册回调函数
    //注册回调函数时,之需要函数名,不要加括号
    //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
    xmlhttp.onreadystatechange = callback;

    
//3。设置连接信息
    //第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
    //第二个参数表示请求的url地址,get方式请求的参数也在url中
    //第三个参数表示采用异步还是同步方式交互,true表示异步
    xmlhttp.open("GET","AJAXServer?name="+ userName,true);

    
//POST方式请求的代码
    //xmlhttp.open("POST","AJAXServer",true);
    //POST方式需要自己设置http的请求头
    //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //POST方式发送数据
    //xmlhttp.send("name=" + userName);

    
//4.发送数据,开始和服务器端进行交互
    //同步方式下,send这句话会在服务器段数据回来后才执行完
    //异步方式下,send这句话会立即完成执行
    xmlhttp.send(null);
}


//回调函数
function callback() {
    
//alert(xmlhttp.readyState);
    //5。接收响应数据
    //判断对象的状态是交互完成
    if (xmlhttp.readyState == 4{
        
//判断http的交互是否成功
        if (xmlhttp.status == 200{
            
//获取服务漆器端返回的数据
            //获取服务器段输出的纯文本数据
            var responseText = xmlhttp.responseText;
            
//将数据显示在页面上
            //通过dom的方式找到div标签所对应的元素节点
            var divNode = document.getElementById("result");
            
//设置元素节点中的html内容
            divNode.innerHTML = responseText;
        }
 else {
            alert(
"出错了!!!");
        }

    }

}



//-----------------xml----使用XMLHTTPRequest对象来进行AJAX的异步数据交互---xml--------------------------------
//
自已写的返回xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
StringBuilder builder 
= new StringBuilder();
builder.append(
"<message>");
//使用responseXML的方式来接收XML数据对象的DOM对象
            var domObj = xmlhttp.responseXML;
            
if (domObj) {
                
//<message>123123123</message>
                //dom中利用getElementsByTagName可以根据标签名来获取元素节点,返回的是一个数组
                var messageNodes = domObj.getElementsByTagName("message");
                
if (messageNodes.length > 0{
                    
//获取message节点中的文本内容
                    //message标签中的文本在dom中是message标签所对应的元素节点的字节点,firstChild可以获取到当前节点的第一个子节点
                    //通过以下方式就可以获取到文本内容所对应的节点
                    var textNode = messageNodes[0].firstChild;
                    
//对于文本节点来说,可以通过nodeValue的方式返回文本节点的文本内容
                    var responseMessage = textNode.nodeValue;



                    
//将数据显示在页面上
                    //通过dom的方式找到div标签所对应的元素节点
                    var divNode = document.getElementById("result");
                    
//设置元素节点中的html内容
                    divNode.innerHTML = responseMessage;
                }
 else {
                    alert(
"XML数据格式错误,原始文本内容为:" + xmlhttp.responseText);
                }

            }
 else {
                alert(
"XML数据格式错误,原始文本内容为:" + xmlhttp.responseText);
            }


//使用jquery返回xml            
function verify(){
    
//首先测试一下页面的按钮按下,可以调用这个方法
    //使用javascript的alert方法,显示一个探出提示框
    //alert("按钮被点击了!!!");

    
//1.获取文本框中的内容
    //document.getElementById("userName");  dom的方式
    //Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点。
    //jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
    var jqueryObj = $("#userName");
    
//获取节点的值
    var userName = jqueryObj.val();
    
//alert(userName);

    
//2.将文本框中的数据发送给服务器段的servelt
    //javascript当中,一个简单的对象的定义方法
    var obj = {name:"123",age:20};
    
//使用jquery的XMLHTTPrequest对象get请求的封装
    $.ajax({
        type: 
"POST<s
分享到:
评论

相关推荐

    Angle-3.4-jquery

    backend-jquery-seed,则是一个项目种子,是快速启动新项目的基础。它通常包含基本的项目结构、配置文件和示例代码,帮助开发者快速搭建新项目,避免从零开始的繁琐工作。backend-jquery-seed中可能包括了jQuery的...

    Angle-3.4-mvc5-jquery

    Angle-3.4-mvc5-jquery 这个压缩包文件包含了两个主要部分:backend-mvc5-jquery 和 backend-mvc5-jquery-seed,它们是基于Microsoft的ASP.NET MVC5框架开发的Web应用程序,利用jQuery进行前端交互。让我们深入探讨...

    Ajax-jQuery-JDBC

    标题中的"Ajax-jQuery-JDBC"揭示了三个关键的技术领域:Ajax、jQuery和JDBC。让我们逐一深入探讨这些技术。 **Ajax(异步JavaScript和XML)**是一种在不刷新整个网页的情况下更新部分网页内容的技术。它通过在后台...

    servlet-Ajax-jQuery学习手册

    整篇手册旨在通过详细的概念解释、实践步骤和工具使用,为学习者铺就一条从基础到实践的Servlet-Ajax-jQuery学习之路,使他们能够快速全面地了解和掌握这三项关键技术,为未来的Web开发打下坚实的基础。

    jQuery动画特效---精通JavaScript+jQuery

    第10课 - jQuery基础 - [精通JavaScript+jQuery] 第11课 - jQuery控制页面 - [精通JavaScript+jQuery] 第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] ...

    ajax ajax jquery-1.4.1-vsdoc

    标题 "ajax ajax jquery-1.4.1-vsdoc" 暗示了这个压缩包包含与AJAX(异步JavaScript和XML)技术以及jQuery库的...同时,对于学习AJAX基础和理解JavaScript库如何简化网络应用开发的初学者,也是一个不错的学习资源。

    Angle-3.4-meteor-jquery

    backend-meteor-jquery-seed则是一个种子项目,为新的应用开发提供基础结构和起点。开发者可以在此基础上快速搭建应用,节省初始化项目的时间。这个种子项目通常包含了基本的路由设置、模板、数据模型以及jQuery的...

    Angle-3.4-mvc6-jquery

    mvc6-jquery-seed项目则是一个基础模板或起点,用于快速搭建新的ASP.NET MVC 6项目,它已经预集成了jQuery和其他必要的库和配置,开发者可以直接在此基础上进行开发,而不必从零开始设置环境。这个种子项目通常包含...

    前端项目-jquery.devbridge-autocomplete.zip

    在这个项目中,jQuery提供了基础框架,使得实现自动补全功能更为简便。 2. **自动完成(Autocomplete)**:这是一种UI设计模式,通过预测用户可能想要输入的内容来增强输入体验。在用户键入时,系统会显示一个包含...

    API中文版集合包括.net-ajax-php-javascript-html-css-jquery-mysql- - - -

    5. **jQuery**:jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery的API设计直观且易于学习,使得JavaScript编程更加高效。 6. **HTML**:超文本标记语言(HTML)是...

    攀枝花学院html-css-js-jQuery-ajax 前端实验

    攀枝花学院提供的这个“html-css-js-jQuery-ajax 前端实验”课程显然旨在教授学生掌握这些核心技术,以便创建交互式的网页和应用程序。以下是对这些技术的详细解释: HTML(HyperText Markup Language)是网页的...

    疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发(part01)

    《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》是疯狂Java体系丛书之一,前8章基本以XHTML、JavaScript和DOM编程为主,无须任何基础即可阅读;第9章以后的内容则需要掌握Spring、Hibernate等Java ...

    artech-javascript-jquery-11

    【标题】"artech-javascript-jquery-11"揭示了这一主题主要关注的是JavaScript库jQuery的第11部分。jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个...

    Ajax-JQuery

    **Ajax基础知识** 1. **创建XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest对象,所有Ajax交互都基于此对象。在JavaScript中,可以通过`new XMLHttpRequest()`创建一个新的XMLHttpRequest实例。 2. **打开连接...

    AJAX ---.NET

    **AJAX基础** 1. **异步性**:AJAX的核心特性是异步处理,允许在用户与页面交互时,后台默默地进行数据处理和页面更新,而不打断用户的操作流程。 2. **JavaScript和XML**:尽管名称中包含XML,但AJAX并不局限于...

    artech-javascript-jquery-15

    【标题】"artech-javascript-jquery-15" 暗示了这是一个关于JavaScript和jQuery的第15个主题的教程或者讲座内容,可能是视频形式。Artech可能是一个教育机构或个人,专注于IT技术的教学。 【描述】"artech-...

    artech-javascript-jquery-12

    【标题】"artech-javascript-jquery-12" 暗示了这是一个关于JavaScript和jQuery的教程,特别是第12部分的内容。JavaScript是一种广泛应用于Web开发的编程语言,而jQuery是一个JavaScript库,它简化了HTML文档遍历、...

    jQuery AJAX 扩展 ----自动放弃及 队列实现

    **一、jQuery AJAX 基础** 在jQuery中,`$.ajax()`函数是进行异步HTTP(Ajax)请求的核心方法。它支持GET、POST等多种HTTP请求方法,并允许开发者自定义请求头、数据格式、回调函数等参数。例如: ```javascript $...

Global site tag (gtag.js) - Google Analytics