不使用Ajax框架实现Ajax效果?

简介: 为了简单明了,我只在html中测试;注释里写的很清楚,我就不多废话了; 很多家公司在面试的时候可能会让你不使用任何Ajax的框架实现Ajax效果,虽然这段代码看上去挺痛苦,但也没有别的办法,记不记也得记(其实理解起来就没那么难记了……) readyState表示XMLHttpRequest对象的处理状态: 0:XMLHttpRequest对象还没有完成初始化。

为了简单明了,我只在html中测试;注释里写的很清楚,我就不多废话了;

很多家公司在面试的时候可能会让你不使用任何Ajax的框架实现Ajax效果,虽然这段代码看上去挺痛苦,但也没有别的办法,记不记也得记(其实理解起来就没那么难记了……)

readyState表示XMLHttpRequest对象的处理状态:
0:XMLHttpRequest对象还没有完成初始化。
1:XMLHttpRequest对象开始发送请求。
2:XMLHttpRequest对象的请求发送完成。
3:XMLHttpRequest对象开始读取服务器的响应。
4:XMLHttpRequest对象读取服务器响应结束。
 

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
    
< title > 不使用Ajax框架实现Ajax效果  </ title >
    
< script  type ="text/javascript"  language ="javascript" >
        
function  btnClick() {
            
var  xmlhttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );  // 创建XMLHTTP对象,相当于WebClient
             if  ( ! xmlhttp) {
                alert(
" 创建xmlhttp对象异常! " );
                
return   false ;
            }

            xmlhttp.open(
" POST " " GetDate.ashx " false );  // 准备向服务器的GetDate.ashx(一般处理程序)发出POST请求。
             // XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回,是异步的,因此需要用匿名监听onreadystatechange事件;
            xmlhttp.onreadystatechange  =   function  () {
                
if  (xmlhttp.readyState  ==   4 ) {    //如果XMLHTTPRequest对象读取服务器响应结束;
                    
if  (xmlhttp.status  ==   200 ) {   // 如果状态码为200则表示处理成功;

                        document.getElementById(
" GetDate " ).value  =  xmlhttp.responseText;   // responseText属性为服务器返回的文本
                    }  else  {
                        alert(
" AJAX服务器返回错误 " );
                    }
                }
            }
            xmlhttp.send(); 
// 这时才开始发送请求
        }
    
</ script >
</ head >
< body >
    
< input  id ="GetDate"  type ="text"   />
    
< input  type ="button"  value ="请求时间"  onclick ="btnClick()"   />
</ body >
</ html >

 

GetDate.ashx (一般处理程序)代码:

 

using  System;
using  System.Web;

namespace  AJAX
{
    
///   <summary>
    
///  GetDate 获取服务器的时间
    
///   </summary>
     public   class  GetDate : IHttpHandler
    {

        
public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType 
=   " text/plain " ;
            context.Response.Write(DateTime.Now.ToString());
        }

        
public   bool  IsReusable
        {
            
get
            {
                
return   false ;
            }
        }
    }
}

 

目录
相关文章
|
2月前
|
XML JSON 前端开发
ajax框架格式,每个属性的作用是什么
ajax框架格式,每个属性的作用是什么
|
3月前
|
XML JSON 前端开发
ajax框架格式,每个属性的作用是什么
ajax框架格式,每个属性的作用是什么
15 0
|
3月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
20 0
|
7月前
|
前端开发 JavaScript Java
SSM框架用Ajax增删改查一个页面(简单易懂)
SSM框架用Ajax增删改查一个页面(简单易懂)
|
9月前
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
58 0
|
10月前
|
JSON 前端开发 Java
【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
|
JSON JavaScript 前端开发
Spring MVC框架:第十一章:Ajax
Spring MVC框架:第十一章:Ajax
102 0
Spring MVC框架:第十一章:Ajax
|
前端开发
$.ajax()的实现方式
$.ajax()的实现方式
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
222 0
【jquery ajax】实现文件上传提交
|
XML JSON JavaScript
原生AJAX实现异步请求
原生AJAX实现异步请求
108 0