《Ajax》

最新推荐文章于 2024-10-16 21:17:13 发布

idiosun

最新推荐文章于 2024-10-16 21:17:13 发布

阅读量70

点赞数

分类专栏： Java EE期末复习文章标签： ajax java javascript

本文链接：https://blog.csdn.net/m0_47603012/article/details/111598010

版权

Java EE期末复习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

《Ajax》

<大纲>

Ajax介绍

Ajax使用流程

利用Ajax实现Java与JavaScript通信

同步与异步的区别

jQuery对Ajax的支持

从Ajax方法衍生的简化方法

1.Ajax介绍

全名：Asynchronous JavaScript And XML(异步的JavaScript和XML)
Ajax可以在不刷新页面的前提下，进行页面局部更新
Ajax不是新的技术，Ajax并不是W3C的标准

2.Ajax使用流程

创建XmlHttpRequest对象

	var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

发送Ajax请求

	xmlhttp.open("GET" , "/ajax/content" , true);
	xmlhttp.send();

处理服务器响应

    
	xmlhttp.onreadystatechange = function()
    {
    	if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
            var t = xmlhttp.responseText;
            alert(t);
            document.getElementById("divContent").innerHTML = t;
            }
    }

3.利用Ajax实现Java与JavaScript通信

Java（Servlet）代码

		List list = new ArrayList();
		if(type != null && type.equals("pypl")) {
			list.add(new News("PYPL:2018年5月份全球编程语言排行榜" , "2018-5-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年6月份全球编程语言排行榜" , "2018-6-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年7月份全球编程语言排行榜" , "2018-7-1" , "PYPL" , "..."));
			list.add(new News("PYPL:2018年8月份全球编程语言排行榜" , "2018-8-1" , "PYPL" , "..."));
			
		}
		String json = JSON.toJSONString(list);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);

javascript代码

var xmlhttp;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET" , "/ajax/news_list" , true);
	xmlhttp.send();
	console.log("请求发送完成");
	 xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			var text = xmlhttp.responseText;
			console.log(text);
			var json = JSON.parse(text);
			var html = "";
			for(var i = 0 ; i < json.length ; i++){
				var news = json[i];
				html = html + "<h1>" + news.title + "</h1>";
				html = html + "<h2>" + news.date + "&nbsp;" + news.source +"</h2>"
				html = html + "<hr/>"
			}
			document.getElementById("container").innerHTML = html;
		}
	}

4.同步与异步的区别

同步：服务器给Ajax请求以响应才继续后面的代码
```
xmlhttp.open("GET" , "/ajax/news_list" , false);
```
异步：服务器处理请求给出响应与后面的代码同时进行
```
xmlhttp.open("GET" , "/ajax/news_list" , true);
```
5.6明天再写