<!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. ThreadLocal源码解析

    主要用途 1)设计线程安全的类 2)存储无需共享的线程信息 设计思路 ThreadLocalMap原理 1)对象存储位置-->当前线程的ThreadLocalMap ThreadLocalMap ...

  2. 分享一个完整的Mybatis分页解决方案

    Mybatis 的物理分页是应用中的一个难点,特别是配合检索和排序功能叠加时更是如此. 我在最近的项目中开发了这个通用分页器,过程中参考了站内不少好文章,阅读源码帮助更大minglisoft.cn/t ...

  3. AlertDialog中的EditText不能输入

    一.描述 在项目中有碰到使用AlertDialog,给他设置自定义布局,自定义布局中有包含EditText,但是运行起来后发现EditText不能输入文字,没有焦点,一开始还以为是事件拦截掉了,后来试 ...

  4. 关于STM32在程序中间修改PWM值的总结（原创）

    首先在STM32库函数里有这样一个函数 void TIM3_PWM_Init(u16 arr,u16 psc)   若TIM3_PWM_Init(7200,100)//设置频谱7200.分频100   ...

  5. nginx-tomcat-memcached架构文档说明（转）

    800x600 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 st1\:*{be ...

  6. qrcode生成二维码插件

    今天我要和大家分享的是利用qrcode来生成二维码. 首先要使用qrcode就需要引用文件,我这边用的是1.7.2版本的jquery加上qrcode <script type="tex ...

  7. scrapy调试时出现 ImportError: No module named win32api

    windows下利用scrapy(python2.7)写爬虫,运行 scrapy crawl dmoz 命令时提示:exceptions.ImportError: No module named wi ...

  8. 黄油刀ButterKnife的使用

    1.ButterKnife是一个由JakeWharton写的开源框架,它使用注解处理将属性和方法和View绑定,以生成模板代码. 2.作用: @1通过使用@BindView 注释属性取消了findVi ...

  9. asp.net core中负载均衡场景下http重定向https的问题

    上周欣喜地发现,微软官方终于针对 asp.net core 在使用负载均衡的情况下从 http 强制重定向至 https 的问题提供了解决方法. app.UseForwardedHeaders(new ...

  10. Hibernate入门（四）

    一 Hibernate缓存 缓存是介于应用程序和数据库之间,对数据库中的数据复制一份到缓存中,其作用就是为了减少应用程序对数据库的访问,访问数据库时先从缓存中取,提高了程序的性能.Hibernate缓 ...