欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入学习Ajax

程序员文章站 2022-03-20 14:36:21
1.什么是Ajax? AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML)。是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整 ......

1.什么是ajax?

  ajax的全称是asynchronous javascript and xml (异步的javascript和xml)。是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  ajax是以下几种技术的组合应用:
    – 基于web标准(standards-based presentation)xhtml+css的表示;
    – 使用 dom(document object model)进行动态显示及交互;
    – 使用 xml 和 xslt 进行数据交换及相关操作;(现在更多的是使用josn)
    – 使用 xmlhttprequest 进行异步数据查询、检索;
    – 使用 javascript 将所有的东西绑定在一起。

2.ajax工作原理

  ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由ajax引擎代为向服务器提交请求。

   深入学习Ajax

 

3.创建ajax的步骤

  1.创建xmlhttprequest对象

var xhr = new xmlhttprequest();

   xmlhttprequest对象是ajax的核心,它是ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成。

  2.使用xmlhttprequest对象创建请求

  深入学习Ajax

   同步模式:发出的请求会暂停所有javascript代码的执行,知道服务器获得响应为止,如果浏览器在连接网络时或者在下载文件时出了故障,页面就会一直挂起。
   异步模式:发出的请求,请求对象收发数据的同时,浏览器可以继续加载页面,执行其他javascript代码

  3.处理响应:监听readystates属性值的变化,写回调函数处理服务器返回的数据

xhr.onreadystatechange = function(){
    if(xhr.readystate == 4 && xhr.status == 200){
        console.log(xhr.responsetext);
    }
}

  readystate :ajax的状态
    0:请求未初始化(还没有调用 open())。
    1:建立请求:但是还没有发送(还没有调用 send())。
    2:发送请求:正在处理中(通常现在可以从响应中获取内容头)。
    3:请求处理中:已有部分数据可用了,但是这时获取部分数据会出现错误。
    4:响应已完成:此时可以通过通过responsebody和responsetext获取完整的回应数据。

  status属性:
    200:"ok"
    404: 未找到页面
    500:服务器内部错误”

  4.使用xmlhttprequest对象发送请求

 

xhr.send();

  发送请求方式:
    get:使用get方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null或为空。

xhr.open("get",url?name="张三"&age=18,true);
xhr.send(null);

    post:需要先使用 setrequestheader()来添加请求头设置post编码方式:。然后在send()方法中发送的数据:

xhr.open("post", url, true);
xhr.setrequestheader("content-type", "application/x-www-form-urlencoded");
xhr.send("name=张三&age=18");

 

4.xmlhttprequest对象的属性和方法

  深入学习Ajax

  深入学习Ajax

5.servlet响应请求

public void dopost(httpservletrequest request, httpservletresponse response)
            throws servletexception, ioexception {
       //最好把请求和响应的编码设置成utf-8
        request.setcharacterencoding("utf-8");
        response.setcontenttype("text/html; charset=utf-8");
  
        printwriter out = response.getwriter();
        out.write(数据);
    }

  数据最好以json的方式发给页面,然后利用eval函数将返回的文本转化成js对象