<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图灵</title>

	<style>

		* {

			margin: 0;

			padding: 0;

			list-style: none;

		}

		#wrap {

			width: 500px;

			margin: 100px auto 0;

		}

		#wrap input {

			width: 486px;

			height: 40px;

			padding-left: 10px;

		}

		#list {

			margin-top: 10px;

		}

		#list li {

			width: 460px;

			/*height: 40px;*/

			line-height: 40px;

			padding: 0 20px;

		}

		#list li.left {

			text-align: left;

			background: #ccc;

		}

		#list li.right {

			text-align: right;

			background: #777;

		}

	</style>

</head>

<body>

	<div id="wrap">

		<input id="ipt" type="text" placeholder="请输入你想说的话">

		<ul id="list">

			<!-- <li class="left">ME:hahahahaha</li>

			<li class="right">你是傻逼:PC</li> -->

		</ul>

	</div>

	<script>

		var ipt = document.getElementById('ipt');

		var list = document.getElementById('list');

		document.onkeyup = function (e) {

			var e = e || window.event;

			if (e.keyCode == 13) {

				if (ipt.value == '') {

					alert("请输入内容");

				} else {

					sendMsg();

					ipt.value = "";

				}

			}

		}

		function sendMsg() {

			var myMsg = document.createElement('li');

			myMsg.className = 'left';

			myMsg.innerHTML = "ME:" + ipt.value;

			list.appendChild(myMsg);

			var xhr = null;

			if (window.XMLHttpRequest) {

				xhr = new XMLHttpRequest();

			} else {

				xhr = new ActiveXObject('Microsoft.XMLHTTP');

			}

			var url = 'http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info='+ipt.value+'&userid=1234567';

			xhr.open('get',url,true);

			xhr.send(null);

			xhr.onreadystatechange = function () {

				if (xhr.readyState == 4) {

					if (xhr.status == 200) {

						var data = JSON.parse(xhr.responseText).text;

						var pc = document.createElement('li');

						pc.className = 'right';

						pc.innerHTML = data + "：PC";

						list.appendChild(pc);

					} else {

						alert(xhr.status);

					}

				}

			}

		}

	</script>

</body>

</html>

　　

AJAX请求小项目的更多相关文章

  1. Ajax请求，跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  2. Ajax请求的几个小练习

    Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...

  3. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  4. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  5. day78_淘淘商城项目_11_单点登录系统实现 + 用户名回显 + ajax请求跨域问题详解_匠心笔记

    课程计划 1.SSO注册功能实现 2.SSO登录功能实现 3.通过token获得用户信息 4.ajax跨域请求解决方案--jsonp 1.服务接口实现   SSO系统就是解决分布式环境下登录问题的,本 ...

  6. vue项目使用axios发送请求让ajax请求头部携带cookie

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...

  7. springboot maven项目运行常见报错 及ajax请求报错

    如图所示 tomcat运行后直接停止,也不报错 原因:我的原因是controller路径配置重名或者service没有配置@Service 遇见这错找了好久问题,网上也搜不到,特此记录一下 问题2 a ...

  8. python学习(26)分析ajax请求抓取今日头条cosplay小姐姐图片

    分析ajax请求格式,模拟发送http请求,从而获取网页代码,进而分析取出需要的数据和图片.这里分析ajax请求,获取cosplay美女图片. 登陆今日头条,点击搜索,输入cosplay 下面查看浏览 ...

  9. JQuery ajax请求struts action实现异步刷新的小实例

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...

随机推荐

  1. git学习笔记之一

    Git是比较优秀的分布式版本管理工具,这次学习了git的基本命令,现在作一些归纳总结,已备复习之用. Git 认识 Git 直接用hash值记录提交的修改文件的快照,本地操作无需联网 Git 有三种状 ...

  2. 如何在Eclipse下查看ＪＤＫ源代码

    设置: 1.点 "窗口"-> "首选项" -> "Java" -> "已安装的JRE" 2.此时&qu ...

  3. 详解Google Chrome浏览器（操作篇）（下）

    开篇概述 由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容.对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即 ...

  4. PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议／服务器、数据库、服务器web开发、PHP简介／常见语法、PHPheader（）、 PHP_POST/GET数据获取和错误处理

    C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可   洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...

  5. 2.1 Java程序的构成

    2.1 Java程序的构成 2.1.1逻辑构成 Java源程序逻辑构成分为两大部分:程序头包的引用和类 的定义 1.程序头包的引用 主要是指引用JDK软件包自带的包,也可以是自己定义的类. 引用之后程 ...

  6. 如何安装Elasticsearch?

    最近工作中要用到搜索引擎,由于目前用的搜索引擎是LeanCloud 提供的 ,不太好用,不支持范围等搜索,而且每天还收费30元,请求次数也有限制.基于这些原因,我们只好在自己的服务器上部署搜索引擎了. ...

  7. EntityFramework6.X 之DbContex

    DbContext 数据库上下文DbContext是ObjectContext代表之一负责管理在运行时从数据库取数据.跟踪数据库的变更.对实体类映射到数据中持久化操作等,表示工作单元和存储库模式的组合 ...

  8. 关于Cookie的知识的总结

    Cookie的类型 会话cookie和持久cookie 会话cookie是一种临时cookie,它记录了用户访问站点时的设置和偏好,当用户退出浏览器时,会话cookie就会被删除. 持久cookie的 ...

  9. mysqldump备份还原mysql

    本文实现在mysql 5.7 解压版为例子 1.在window上简单试下一个例子 1.使用管理员权限打开cmd命名行,并切换到mysqldump执行程序下

  10. 开涛spring3(3.4) - DI 之 3.4 Bean的作用域

    3.4  Bean的作用域 什么是作用域呢?即“scope”,在面向对象程序设计中一般指对象或变量之间的可见范围.而在Spring容器中是指其创建的Bean对象相对于其他Bean对象的请求可见范围. ...