ajax

最新推荐文章于 2024-11-12 12:12:08 发布

烟雨青山

最新推荐文章于 2024-11-12 12:12:08 发布

阅读量686

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq1036053871/article/details/17223915

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.获得XMLHttpRequest对象

因为XMLHttpRequest并没有标准化，所以，要区分浏览器。

function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
  // 非ie浏览器
  xhr = new XMLHttpRequest();
}else{
  xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}

2.XMLHttpRequest对象(ajax对象)的重要属性

1) onreadystatechange : 绑订一个事件处理函数,该函数用来处理readystatechange事件
        (当readyState属性值发生改变，就会产生该事件)。
2) responseText    : 获取服务器返回的文本。
3) responseXML    : 获取服务器返回的xml。
4) readyState    : ajax对象在与服务器进行通讯时的一种状态,有5个值，分别是0,1,2,3,4。
        比如值为4时，表示ajax对象已经成功地获取了服务器返回的所有的数据。
5) status     : 状态码

3.编程步骤

第1步 : 获得ajax对象

   比如:
    var xhr = getXhr();

第2步 : 发送请求

   xhr.open(请求方式,请求地址,同步还是异步);

    注意：
    请求方式  : 'get'或者'post'
    请求地址  : 如果是get请求，需要将请求参数添加到请求地址的后面，
        比如: 'check_username.do?username=zs'
    同步还是异步 : true表示异步,false表示同步(响应回来才能继续操作)
    // 绑订一个事件处理函数
   xhr.onreadystatechange=f1;
   xhr.send(null);
    // get时为null参数在地址，post时放参数
第3步 : 编程服务器端的代码，跟以前相比，有一点区别就是一般不需要返回完整的页面，只需要返回部分的数据。

第4步 : 编写事件处理函数

    function f1(){
     if(xhr.readyState == 4){
      var txt = xhr.responseText;
      // 更新操作...
     }
    }

4.get请求的ajax编程

5.post请求的ajax编程

6.my.js里的函数

  // 通过id获得节点对象
  function $(id) {
   return document.getElementById(id);
  }
  // 通过id获得value
  function $F(id) {
   return document.getElementById(id).value;
  }

  // 获取XMLHttpRequest对象
  function getXhr() {
   var xhr = null;
   if (window.XMLHttpRequest) {
      // 非ie浏览器
    xhr = new XMLHttpRequest();
   } else {
    xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
  }

7.改进

6.1.实现正在检查....

  post请求的ajax编程

  function fun(){
   var xhr = getXhr();
   xhr.open('post','请求的servlet',true);
   xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
   xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
      var txt = xhr.responseText;
      $('要显示的标签的id').innerHTML=txt;
     }
    };
    //实现正在检查....
    $('要显示的标签的id').innerHTML="正在检查...";
   xhr.send('参数='+'参数值');
  }

6.2.图片的使用
  //servlet里发送
  out.println("<img src='images/unchecked.gif'/>验证码错误");

6.3.系统异常的处理

  post请求的ajax编程

  function fun(){
   var xhr = getXhr();
   xhr.open('post','请求的servlet',true);
   xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

   xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
     //200为正确运行
     if(xhr.status == 200){
      var txt = xhr.responseText;
      $('要显示的标签的id').innerHTML=txt;
     }else{
      $('要显示的标签的id').innerHTML = '系统错误';
     }
    }
   };

   $('要显示的标签的id').innerHTML="正在检查...";
   xhr.send('参数='+'参数值');
  }

8、编码问题

8.1.get

  step1.tomcat的server.xml, 添加 URIEncoding="utf-8"
  step2,使用encodeURI函数对请求地址进行编码。(使用utf-8这种编码格式)

8.2.post

  xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

request.setCharacterEncoding("utf-8")就可以解决编码问题

9.json来做数据交换

9.1.java对象转换成json字符串

  第1步:导入jar包
  第2步:
   //一个对象
    JSONObject obj=JSONObject.fromObject("javabean对象");
     String jsonStr=obj.toString();
   //对象集合或数组
     JSONArray obj=JSONArray.fromObject("javabean对象集合");
     String jsonStr=obj.toString();

9.2.json字符串转换成javascript对象

  可以使用prototype提供的evalJSON函数

  例子:
   var txt = xhr.responseText;
   //txt是一个json字符串，先转换
   //成一个javascript对象组成的数组
   //将json字符串转换成一个js对象
   //如果是json集合或数组，会得到一个js对象的数组
   var arr = txt.evalJSON();

10.prototype.js文件的常用方法

10.1. $(id) : 相当于document.getElementById(id);
10.2. $F(id): 相当于document.getElementById(id).value;
10.3. $(id1,id2,id3...):使用id1,id2,id3...分别去查找对应的节点，返回由这些节点组成的数组
10.4. strip() : 除掉字符串两端的空格
10.5. evalJSON() : 将json字符串转换成javascript对象

11.ajax局部更新技术

jsp文件中每个一段时间调用一下ajax对象,把返回的数据显示出来,局部更新

例子:
  function f1(){
   //每隔多少秒调用f2函数
   setInterval(f2,毫秒数);
  }

  function f2(){
   //ajax编程代码
  }

12.json数据转换-处理日期类型

第1步:写一个转换器
写一个java类,实现JsonValueProcessor接口
第2步:实现两个process方法,按照你自己的要求,定义转换规则
第3步:创建JsonConfig对象,使用该对象注册转换器
第4步:JSONArray.fromObject(srcObj,JsonConfig);

例子:
  //创建一个转换器
  (转换器java类) processor = new (转换器java类);
  processor.setPattern("yyyy-MM-dd");
  //注册转换器
  JsonConfig config = new JsonConfig();
  config.registerJsonValueProcessor(Date.class, processor);
  //利用转换器，生成json字符串
  JSONObject obj = JSONObject.fromObject(user,config);