AJax技术

残风vs逝梦的个人页面

字号+ 作者:H5之家 来源:H5之家 2017-06-23 09:00 我要评论( )

AJAX what: 一种改善客户端体验的技术。本质上就是在客户端使用js代码,通过浏览器中一个特殊的对象(XMLHttpRequest)异步(浏览器不会销毁当前的页面,客户可以在页面继续其他的操作而不被打断)的向服务器端发送请求,服务器端返回的是部分数据(可以是文本

AJAX   


what: 一种改善客户端体验的技术。本质上就是在客户端使用js代码,通过浏览器中一个特殊的对象(XMLHttpRequest)异步(浏览器不会销毁当前的页面,客户可以在页面继续其他的操作而不被打断)的向服务器端发送请求,服务器端返回的是部分数据(可以是文本,xml,json),客户端接收到数据后,使用js将数据更新到页面中。整个过程没有页面的整体刷新,只是使用js进行局部刷新,用户操作不会被打断。


AJAX编程的主要步骤:


创建XMLHttpRequest对象


a.      var variable; variable=new XMLHttpRequest();     var variable;     variable=new ActiveXObject("Microsoft.XMLHTTP");


c. 获取XMLHttpRequest对象的脚本: function getXhr(){ var variable; if(window.XMLHttpRequest){ variable=new XMLHttpRequest(); }else{ variable=new ActiveXObject("Microsoft.XMLHTTP"); } return variable; } 编写回调事件处理函数

得到XMLHttpRequest对象之后,就可以编写回调事件处理函数了。

var xhr=getXhr(); xhr.onreadystatechange=function(){     //这儿编写用户自定义处理函数,  xhr的状态值有5种, 0,1,2,3,4     //这儿我们最关心的状态值是4 ,onreadystatechange函数中会触发2,3,4三种状态值     alert(xhr.readyState);//那么我们可以看到3中状态值,2,3,4 }


创建请求


get请求 xhr.open('get','ajax.do',true)// 第一个参数为请求方式,get/post....  第二个参数为请求的url(参数可以直接附加在url后面)  第三个参数为是否是异步的请求true为是,false为否


  get请求中文问题:     编码设置

    js代码:

var uri=encodeURL('check?name=张三'); xhr.open('get',uri,true); xhr.send();   后台代码: String name=request.getParameter("name"); name=new String(name.getBytes("ISO8859-1"),"UTF-8");   修改tomcat的配置
在tomcat的conf目录下,找到server.xml中找到Connector 节点,添加属性  URLEncoding="utf-8" post请求 xhr.open('post','ajax.do',true); // 普通的post请求可以直接这样使用 //如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后再send() 方法中规定您希望发送的数据: xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");


 post请求中文问题:

a. 在页面使用mate元素设置字符编码 b. 服务器端,使用request.setCharactorEncoding("UTF-8"); 创建请求 get请求:
xhr.open('get','check_name.do?name=zs',true); post请求: xhr.open('post','checkname.do?name=zs',true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");


发送请求: xhr.send(null); // or xhr.send("name=zs&age=24&id=1");


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 问题1:js这么语言的能力取决于什么?(运行平台)问题2:js是否能够操作文件(一般不能),ajax能否操作文件(一般不

    问题1:js这么语言的能力取决于什么?(运行平台)问题2:js是否能够

    2017-06-21 12:00

  • Ajax及Ajax技术

    Ajax及Ajax技术

    2017-06-21 08:09

  • ajax更新浏览量

    ajax更新浏览量

    2017-06-20 18:01

  • 关于JQUERY的AJAX跨域问题

    关于JQUERY的AJAX跨域问题

    2017-06-20 18:00

网友点评