Ajax模式开发者模式

Posted 2022-12-23 钟钟终

第七章 Ajax

一、简介
ajax是实现浏览器和服务器异步交互的技术，对用户请求进行局部刷新
1.使用Xhtml(HTML)和CSS构建标准化的展示层。
2.使用DOM进行动态显示和交互。
3.使用XML和XSLT进行数据交换和操纵。
4.使用XMLHttpRequest异步获取数据。
5.使用javascript将所有元素绑定在一起。

二、XMLHttpRequest对象

1.XMLHttpRequest对象是Ajax的核心技术之一，在Ajax中，通过这个对象实现与服务器端通信。
2.这个对象由JavaScript来创建，在不同的浏览器中有不同的创建方法，但创建成功后，其使用方法是相同的。
创建：

	 //声明XMLHttpRequest对象
	var xmlHttpRequest=null; 
	if(window.XMLHttpRequest)   
		//针对Mozilla,Safari,Opera,IE7等浏览器创建
    	xmlHttpRequest = new XMLHttpRequest();
	
	else if(window.ActiveXObject)
    	try
      	xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); //针对IE较新版本创建
    	catch(e)
          try 
             xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE较老版本
          catch(e)
   

1.open方法：open(string request-type,string url,boolean asynch,string name,string password)
string request-type：表示发送请求的类型，get、post、head等方法。主要汉字乱码的问题，Servlet:response.setContentType("text/html;charset=utf-8");

2.send方法： send(String content)
向服务器发送请求

3.setRequestHeader方法：setRequestHeader(string label,string value)
该方法用于设置请求头信息。
例如，若在open方法中使用的request-type的值是“post”，则需要设置请求头

xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4.readyState属性
提供当前HTML的就绪状态，用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成
· 0：请求没有发出（在调用open()之前）
· 1：请求已经建立但还没有发出（调用send()之前）
· 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
· 3：请求已经处理，响应中有部分数据可用，但是服务器还没有完成响应
· 4：响应已完成，可以访问服务器响应并使用它。

5. status属性
   服务器响应的状态代码。服务器响应完成后(readyState=4)，从完成的响应信息中可获得状态代码。

输入了错误的URL请求将得到404错误码，它表示该页面不存在；
403和401错误码表示所访问的数据受到保护或者禁止访问；
200状态码表示一切顺利。

因此，如果就绪状态是4而且状态码是200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。

6.onreadystatechange属性
用于指定XMLHttpRequest对象的状态改变函数（类似于按钮对象的onclick属性），
当XMLHttpRequest对象状态(readyState的值)改变时，该函数将被触发，该函数也称回调函数。
假设回调函数为callback，则它的代码通常为：

function callback()
  if (xmlHttpRequest.readyState == 4)
    if (xmlHttpRequest.status == 200)
        事件响应代码
    
  

7. responseText属性和responseXML属性
   XMLHttpRequest对成功返回的信息有两种处理方式：

responseText：服务器返回的请求响应文本；将传回的信息当字符串使用。

responseXML：服务器端返回的XML类型的响应；将传回的信息当XML文档使用，可以用DOM处理。这种情形下，
通过如下代码设置： response.setContentType("text/xml;charset=UTF-8");

JSON简介

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的。

JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript 等）

字符串转换为json对象：
(1)使用JSON.parse（JsonStr）方法（推荐）
(2)使用eval（“（”+JsonStr+“）”）方法
两种方法推荐使用第一种，因为eval方法不会去检查给的字符串是否符合json的格式，同时如果给的字符串中存在js代码，eval也会一并执行，存在安全风险。

Java对象与JSon的转换
服务器端响应的结果通常是一个Java对象，在Ajax编程模式下需要将它转化成字符串发送给客户端，手动转化是很繁琐的;
因此可以利用开源类库完成两者的转化，包括JackSon、FastJson、Google-Gson、JSon-lib类库等;
这里简单介绍JSon-lib类库的使用（下载地址）。主要用到JSONObject（JSON对象）和JSONArray（JSON数组）两个类。
1 . Java对象、集合/数组转换为JSON字符串，主要方法：

JSONObject.fromObject();//对象=>字符串
JSONArray.fromObject(); //集合/数组=>字符串

2 . JSON字符串转换为Java对象、集合，主要方法：

JSONObject.toBean();//json对象=>java对象
JSONArray.toCollection();//json集合=》java集合

Jquery实现Ajax
load（）方法：$(selector).load(URL,data,callback);
URL：必选项，设置加载的 URL。
data ：可选项，请求字符串，键/值对集合（&隔开的字符串或JSON形式）。
Callback：可选项 ，设置load() 方法完成后所执行的函数。
参数以json方式传递时，
后台执行doPost方法$("#div1").load("load","p":"jsp程序设计");
若非json格式，
则后台执行doGet方法$("#div1").load("load","p=jsp程序设计");

$.get()方法：‘$.get(URL,data,callback);`
功能：以GET方式从服务器请求数据。
参数同load()方法

$.post()方法：‘$.post(URL,data,callback);`

$.ajax()方法：‘$.ajax(name:value, name:value, … );功能：jQuery的底层Ajax实现，简单易用的高层实现见$.get, $.post` 等

serialize()和serializeArray()方法
功能：两个方法功能类似，都用来序列化一组表单元素，前者返回一组键值对字符串，后者返回JSON对象。

---

第八章 开发者模式小结

1.静态页面技术（Html，Css，JavaScript）
2.动态页面（Jsp）
3.数据库编程（Jdbc）
4.JavaBean
5.Servlet
6.Ajax
在开发一个web项目时，可以根据实际情况，灵活搭配。

MAC：model->JavaBean、view->jsp、controller->Servlet

（1）设计输入页面，将请求提交到Servlet。
（2）Servlet获取请求参数，调用Javabean封装、处理数据，将结果保存到合适的范围内(请求、会话或应用)，转发到输出页面(如果输出结果很简单，可用out直接输出)
（3）输出页面显示输出数据（el/jstl）

	// //解决post提交方式下汉字乱码问题
	request.setCharacterEncoding("utf-8"); 
	//获取原始数据1
  	String inputdata1=request.getParameter("parameter1");
  	//获取原始数据2
  	String inputdata2=request.getParameter("parameter2");
  	
    。。。//处理数据，通常要实例化javabean并调用其方法来完成数据处理

	//得到结果
  	Object  outputdata=...
  	//处理结果放在了request对象的result属性中
  	request.setAttribute("result",outputdata);
  	//指派输出页面显示结果
  	request.getRequestDispatcher("/output.jsp").forward(request,response);

一个Web项目会频繁地操作数据库：
因此我们常常将数据库的基本操作（crud，增删改查）封装在特定的类（Dao）中供调用，也即数据访问作为一层从业务逻辑中独立出来。
（1）servlet：放置Servlet类。
（2）entity：放置实体类。
（3）dao：放置数据访问类。
（4）service：放置业务逻辑类。
（5）util：放置工具类，如获取和释放连接的类。

Ajax模式
1.Ajax模式和传统模式（请求-响应）的区别：异步发送、接收数据，页面不需要刷新，事件驱动。
2.服务器端（可以是Jsp，asp或php等）只需要返回字符串（JSON），页面渲染组装的工作由客户端完成。
3.可以作为传统模式的补充，但在前后端分离模式流行的今天，它成为了主要的开发模式，是前端工程化的基础。