<!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. 《大型网站系统与JAVA中间件实践学习笔记》-1

    第一章:分布式系统介绍 定义:分布式系统是一组分布在网络上通过消息传递进行协作的计算机组成系统. 分布式系统的意义 升级单机处理能力的性价比越来越低 单机处理器能力存在瓶颈 处于稳定性和可用性考虑 阿 ...

  2. iOS开发之判断用户是否打开APP通知开关

    一.前言 在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户感兴趣的那么通过通知机制就可以告诉用户此时发生的事情.iOS中通知机制又叫消息机制,其包括两类:一类是 ...

  3. Arduino UNO +ESP8266采集数据上传到贝壳网

    集成电路设计大赛赛程将至,我现在还是毫无头绪,然后又报了一个互联网+,比赛报了,东西就必须出来,时间很紧的情况下,所以选择了开源的arduino的进行完成.从开始接触Arduino到完成工程,前前后后 ...

  4. XML编辑工具

    [标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...

  5. python selenium 环境搭建（一）

    elenium 虽然过了这么多年,但是到目前为止依然是比较流行的自动化框架了,还有很多的初学者在学习,所以根据自己的时间将把相关的资料汇总一下,下面首先我们需要搭建一下基础环境. 首先自己本身比较笨, ...

  6. Appium 1.6.4 环境搭建流程(Java, Android+IOS, Windows+Mac)

    Appium1.6.4已经出来一段时间了,快速给大家串一下怎么搭建,贴了下载链接 1 基础环境: Windows + Mac: Java JDK 1.8+ (需配置环境变量),Appium1.6.4的 ...

  7. StringTokenizer使用笔记

    StringTokenizer 基本使用 笔者最近在做算数表达式的逆波兰式转换和解析,原始表达式为String类型,在使用StringTokenizer 之前笔者的解决思路是 将原始表达式->转 ...

  8. CSS3如何实现超出指定文本以省略号显示效果

    不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境.H5真的日渐 ...

  9. Day4-生成器generator

    列表生成式 需求:列表[0,1,2,3,4,5,6,7,8,9]每个值加1,如何实现? 方法1:列表追加 >>> a = [0,1,2,3,4,5,6,7,8,9] >> ...

  10. 【less和sass的区别，你了解多少？】

    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...