深入学习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引擎代为向服务器提交请求。

   

3.创建Ajax的步骤

  1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

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

  2.使用XMLHttpRequest对象创建请求

  

   同步模式:发出的请求会暂停所有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对象的属性和方法

  

  

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对象

原文地址:https://www.cnblogs.com/gaojinshun/p/10981907.html

时间: 2024-10-13 11:44:20

深入学习Ajax的相关文章

学无止境,学习AJAX(一)

什么是AJAX?异步JavaScript和XML. AJAX是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 不会AJAX=营养不良 现在站点讲求交互~~~以前也用AJAX,但不系统不深入,所以还是老老实实系统学习一下吧.相信花的这点时间学习,对以后项目帮助是巨大的. 先学习了一个简单的例子,通过点击按钮

学习ajax 总结

一.服务器客户端基础知识 通信是指不同计算机程序的通信,单单通过ip地址就能知道你找的是哪一台计算机,但是不知道是计算机上的哪个应用程序,要想知道是哪个程序就必须通过端口.这时候就可以问端口到底是什么了,简单点说端口就是计算机对外连接的出口,不同的应用程序的出口不同,所以我们可以用端口来判断是哪个应用程序,通常所说的80端口就是最www上网服务端口 在日常生活中我们记住的都是网站的域名,因为域名有意义方便记住,而ip地址不好记住比如www.baidu.com.那我们通过域名来访问网站时其实是分为

Javascript学习------ajax

原生js 封装ajax-纯粹网上直接照搬,没看懂希望下次回头看时能明白一点: <!DOCTYPE html> <html> <body> <script type="text/javascript"> // 使用原生js 封装ajax // 兼容xhr对象 var $ = { createXHR: function () { if (typeof XMLHttpRequest != "undefined") { //

对学习Ajax的知识总结

1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互,局部刷新: 1.3.Ajax 能减少服务器压力: 1.4.Ajax 能提高用户体验: 2.Ajax交互和传统交互的比较 传统交互:网页整体刷新,服务器压力大,用户体验不好: Ajax 交互:局部刷新,服务器压力小,用户体验好: 3.Ajax核心知识 3.1 XMLHttpRequest对象的创建 所

Java学习--Ajax介绍及使用

一.使用Ajax 1.什么是ajax? 是一种用来改善用户体验的技术,本质上是利用浏览器提供的一个     特殊对象(XMLHttpRequest对象,一般也可以称之为ajax对象)向     服务器发送异步请求:服务器返回部分数据,浏览器利用这些数据     对当前页面做部分更新:整个过程,页面无刷新,不打断用户的操作.     注:         异步请求,指的是,当ajax对象发送请求时,浏览器不会销毁     当前页面,用户仍然可以对当前页面做其它操作 2.获取ajax对象 funct

在学习AJAX时关于JSON有一些疑问总结

运维在日常的工作中可能会写很多脚本来完成特定的一些功能,比如运维A写个版本发布的代码,里面会有文件推送的逻辑,运维B想实现一个远程脚本执行的功能,可能在他的代码里也有文件推送的逻辑.在没有引入原子化设计的概念下,运维人员用各自的方式来实现文件推送这块的逻辑. 当然,我们封装一个组件不可能直接去使用这个tpl.而是提供一个外部组件函数,然后传递参数到这个组件函数中,组件函数不仅渲染页面(即插入组件dom),还处理相关的逻辑.如上面的rightsideBar.js就是为外部提供一个组件函数.righ

学习AJAX(一)

学习AJAX(二)

JavaScript学习总结【12】、JS AJAX应用

1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的